/*
 Template Name : Travel Agency
 Author : Musfiq Rubel
 Version : 1.0
*/

html {
  
  background-color:#EAEFF5;
  
}


body{
  margin: 0 auto;
  background: url("../images/bg.svg");
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;  
  animation: bgCol 6s linear ;
}

@keyframes bgCol {
  0%{
    filter: saturate(0%) contrast(140%) opacity(70%) ;
  }
  100%{
    filter: saturate(100%) contrast(100%)  opacity(200%) ;
  }
}

.empty {
  width: 250px;
  height: 30px;
  margin-top: 20px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  text-decoration: inherit;
  padding: 5px;
  font-size: 18px;
  border:1px solid #ddd;
  border-radius:20px;
  background: transparent;
  margin-left: 150px;
}

.nav-link{
  color:#5C78A0 !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 10px;
}

#top-sec-content{
  text-align:justify;
  margin: 80px 40px 0px 30px;
  
  
  padding: 5px;
  color: #5C78A0;
  
  font-family: 'Poppins', sans-serif;
  letter-spacing: 1px;
  font-weight: 500;
  
}

#top-sec-content h3,h1 
{
  text-align:center;
}

#top-sec-content h3{
  color: #5C78A0;
  font-weight: 700;
}
#top-sec-content h1{
  color: #E9A845;
  font-size: 50px;
  font-weight: 700;
 
}
.travel-headline{
  height: 50px;
 visibility: hidden;
  }

#logo{
  width: 150px;
  height: 150px;
}

button{
  margin-left: 30%;
}
#capt{
  display:inline;
}

/****** Wave Button  ********/
#btn-wave{
  width: 250px;
  margin-left: 15% ;
  position: relative;
  display: block;
  padding: 10px 30px;
  border: 2px solid #00aeff;
  border: 2px solid #5C78A0;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 4px;
  color: #00aeff;
  color: #5C78A0;
  text-decoration: none;
  overflow: hidden;
  text-align: center;
  border-radius: 20px;
}

#btn-wave span {
  position: relative;
  z-index: 1;
  transition: 1s;
}

#btn-wave:hover span {
  color: #fff;
}

#btn-wave .wave{
  position: absolute;
  top: calc(100% + 22px);
  left: 0;
  width: 100%;
  height: 100%;
  background: #00aeff;
  background: #5C78A0;
  transition: 1s;
}

#btn-wave:hover .wave{
  top: 0;
}

#btn-wave .wave:before{
  content: '';
  position: absolute;
  top: -22px;
  left: 0;
  width: 100%;
  height: 22px;
  background: url(../images/wave1.svg);
  animation: animate 0.5s linear infinite;
}

@keyframes animate{
  0%{
    background-position-x: 0;
    background-position-y: -22;

  }
  100%{
    background-position-x: 118px;
    background-position-y: -22;

  }
}


/****** Wave Button End ********/

/*************** Typing text animation css ************/

h1 {
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-size: 30pt;
  margin-bottom: 15px;
}
h3 {
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-size: 30pt;
  margin-bottom: 15px;
}



/**************** Typing text animation css**********/


/*********Responsive part for mobile *****/
  
@media (max-width: 767.98px) 
{ 
  body{
    
    background: url("../images/mobi-bg.png");
    background: url("../images/mobi.svg");
    background-position: center;
    background-repeat: no-repeat;
     background-attachment:fixed;
      background-size:100% 100%; 
     
  }

  #top-sec-content{
    
    text-align:justify;
    margin-left: 10% ;
    margin-top: 150px ;
    padding: 5px;
    color: #5C78A0; 
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    font-weight: 500;
    }

  #top-sec-content h3{
    color:#5C78A0;
    font-size: 30px;
    font-weight: 700;
  }

  #top-sec-content h1{
    color:#E9A845;
    font-size: 40px;
    font-weight: 700;
  }

  .empty {
    width: 250px;
    height: 30px;
    margin-top: 30px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    padding: 5px;
    font-size: 18px;
    border:1px solid #ddd;
    border-radius:20px;
    background: transparent;
    margin-left: 5px;
  }
 }






