.abt{
    padding-top: 30px;
    padding-bottom: 20px;
    position: absolute;
    display: block;
    height: 100%;
    background: linear-gradient(-45deg, #ff0000, #c4c274, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    width: 100%;
    color: #000000;
    text-align: center;
}

.abt-div{
    margin:0px;
    text-align:center;
    font-family:'Roboto';
    font-size:35px;
    font-weight:100;
    overflow:hidden;
}
@media(max-width:700px){
    html,body{
        overflow-x: hidden;
    }
    .abt {
        background: grey;
    }
    .abt-div{
        width: 100%;
        position: absolute;
        background: grey;
    }
    .abt-div p{
        padding: 10px;
        font-family: 'Cookie', cursive;
        font-size: 15px;
        background: grey;

    }
    
}
.abt-div h1{
    padding: 10px;
    font-family: 'Poppins';
    font-size: 45px;
}
.abt-div p{
    padding: 10px;
    font-family: 'Cookie', cursive;
    font-size: 30px;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
.dropping-texts {
  display: inline-block;
  width: 180px;
  text-align: center;
  height: 36px;
  font-family: 'Roboto';
}

.dropping-texts  div{
  font-size:0px;
  opacity:0;
  position:absolute;
  font-weight:300; 
  font-family: 'Roboto';  
  box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5);
}
.dropping-texts  div:nth-child(1) {
  animation: roll 5s linear infinite 0s;
}
.dropping-texts  div:nth-child(2) {
  animation: roll 5s linear infinite 1s;
}
.dropping-texts  div:nth-child(3) {
  animation: roll 5s linear infinite 2s;
}
@keyframes roll {
  0% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(-25deg);
  }
  3% {
    opacity:1;
    transform: rotate(0deg);
  }
  5% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
  20% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
  }
  27% {
    font-size:0px;
    opacity:0.5;
    margin-left:20px;
    margin-top:100px;
  }
  100% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(15deg);
  }
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.hi{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0),rgba(0,0,0,0));
    background-position: center;
    background-size: cover;
    position: relative;
}
.end{
    background-color: steelblue;
    display: flex;
    position: relative; 
    padding:30px 35px 30px 30px;
}
.end img{
    width: 150px;
    height: 100px;
}
.end-div1{
    flex:1;
    text-align: right;
}
.end-div1 address{
    font-size: 20px;
    font-family: 'Zen Kurenaido', sans-serif;
}
.end-div2{
    position: absolute;
    bottom:30px;
}
.end-div2 p{
    font-size: 20px;
    font-family: 'Zen Kurenaido', sans-serif;
}
.fa {
    padding: 10px;
    font-size: 20px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {  
    background: #3B5998;
    color: white;
}
.fa-twitter {
    background: #55ACEE;
    color: white;
}
.fa-google {
    background: #dd4b39;
    color: white;
}
.fa-linkedin {
    background: #007bb5;
    color: white;
}
.fa-youtube {
    background: #bb0000;
    color: white;
}
.fa-instagram {
    background: crimson;
    color: white;
}
@media(max-width: 700px){ 
    .end{
        padding:15px 15px 15px 15px;
        margin-top: 696px;
        position: absolute;
    }
    .end-div2{
        bottom: 15px;
    }
    .end-div2 p{
        font-size: 15px;
    }
    .end img{
        width: 100px;
    }
}