*{
    margin: auto;
    padding: 0%;
}
#header{
    height:55px;
    width: 100%;
    background-color: rgb(20, 18, 19);  
    position:fixed; 
    z-index: 1;
}
#header ul{
    margin-left: 20px;
    padding-top: 18px;
}
#header ul li{
    display:inline;
    padding: 10px;
}
#header ul li a{
    text-decoration: none;
    color:white;
}
.content{
    height: 900px;
}
.fas{
    color: rgb(113, 201, 223);
    margin-right: 20px; 
    text-decoration: none;
    /* display:inline;
    padding: 10px; */

}
.content img{
    position: absolute;
    height:300px ;
    top:90px ;
    margin-left: 17%;
    z-index: -1;
    border-radius:4px ;
}
.content h3{ 
    font-size:xx-large;
    position: relative;
    z-index: 1;
    padding-top: 100px;
    margin-left: 300px;
    animation-name:h3;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    animation-duration: 7s;
}
@keyframes h3 {
    0%{
     opacity:0;
     transform:translateY(-28px);}
    100%{
     opacity: 1;
     transform:translateY(0px);}
 }
.content p{
    position: relative;
    top:22px;
    z-index: -1;
    margin: 0% 30%;
    text-align: center;
    padding: 20px;
    animation-name:p;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    animation-duration: 5s;
}
@keyframes p{
    0%{
     opacity:0;
     transform:translateY(30px);}
    100%{
     opacity: 1;
     transform:translateY(0px);}
 }
 .card{
    animation-name:card;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    animation-duration: 5s;
    z-index: -1;
 }
 @keyframes card{
    0%{
     opacity:0;
     transform:translateX(-100px);}
    100%{
     opacity: 1;
     transform:translateX(0px);}
 }
.box1{
    position: relative;
    top:170px;
    height: 400px;
    z-index: -1;
    margin: 0% 30%;
    border-radius: 2%;
    box-shadow: 3px;
    background-color: rgba(198, 242, 245, 0.668);
}


.form{
    position: absolute;
    top:630px;
    width: 64%;
    margin:0% 16%;
}
.box-container{
  display :flex;
  margin: 1% 11%;
  font-size: 20px;
  
}
.box-container .box{
  margin-top: 10px;
}
.box-container .box p{
  font-family: 'Times New Roman', Times, serif;
  color: rgb(105, 95, 95);
}
.box-container .box h3{
  margin-bottom: 30px;
}
.box-container .box a{
  display:block;
  margin: 5px;
  color: rgb(105, 95, 95);
  text-decoration: none;
  font-family: 'Times New Roman', Times, serif;
  margin-top:10px ;
}
.box-container .box a:hover{
  color: rgb(58, 183, 203);
  font-family:Arial, Helvetica, sans-serif;
  
}
.box-container .box:nth-child(1){
  width:30%;
}
.icon1{
    display:flex;
    margin-left: 55px;
    justify-content:space-around;
}
.icon1 .icon-content{
    padding-left: 20px;
}
.icon1 img{
    width:55px;
    height: 80px;
}
.icon1 h5 p{
    width:35px;
   
}
.btn:hover{
    background-color: black;
    color: white;
    
}
.scroll-top{
    position: fixed;
    bottom: 3.1rem; right:2rem;
    z-index: 1000;
    font-size: 3.5rem;
    background:rgba(40, 8, 22, 0.1);
    color:var(--green);
    border-radius: .5rem;
    border:.1rem solid rgba(37, 151, 217, 0.1);
    padding:.5rem 1.5rem;
    display: none;
  }
  
  .scroll-top:hover{
    background:var(rgb(99, 96, 225));
    color:rgb(24, 132, 154);
  }