/* here we giving animation to header */
@keyframes glow {
  from {
    /* scale: 200% 1; */
    opacity: 0;
  }

  to {
    /* scale: 100% 1; */
    opacity: 100;
  }
}

@keyframes slide-in {
  0%{
      transform: translateY(-90px);
      opacity: 0;
  }
  100%{
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes slide-top-bottom {
  from{
      opacity: 0;
      transform: translateY(80px);
      /* transform: scale(0.5); */
      /* scale:0.5; */
  }
  to{
      opacity: 1;
      transform: translateY(0px);
      /* transform: scale(1); */
      /* scale:1; */
  }
}

@keyframes slide-left {
  from{
      opacity: 0;
      transform: translateX(100px);
      /* transform: scale(0.9); */
      /* scale:0.5; */
  }
  to{
      opacity: 1;
      transform: translateX(0px);
      /* transform: scale(1); */
      /* scale:1; */
  }
}

@keyframes slide-out {
  from{
      opacity: 0;
      transform: translateX(-100px);
      /* transform: scale(0.9); */
      /* scale:0.5; */
  }
  to{
      opacity: 1;
      transform: translateX(0px);
      /* transform: scale(1); */
      /* scale:1; */

  }
}

@keyframes appear {
  from{
      opacity: 0;
      /* transform: translateX(-50px); */
      transform: scale(0.7);
      /* scale:0.5; */
  }
  to{
      opacity: 1;
      /* transform: translateX(0px); */
      transform: scale(1);
      /* scale:1; */

  }
}

/* here we giving style to header  */
.title1 {    
    height: 200px;
    width: 100%;
    padding-top: 70px;
    padding-left: 130px;
    padding-bottom: 60px;
    left: auto;
    color: #FFFFFF;
    font-family: Oxygen;
    font-weight: bold;
    font-size: 40px;
}
.title1 {
  
    color: #ffffff;
    background-image: -webkit-linear-gradient(180deg,rgba(193,193,193,1.00) 9.95%,rgba(61,80,99,1.00) 100%,rgba(61,80,99,1.00) 100%);
    animation-duration: 3s;
    animation-name: glow;
    margin-top: 70px;
}

  /* here we giving style to contact us text  */
  .contactus{
    margin-top: 28px;
    font-family: Oxygen;
    font-weight: bold;
    font-size: 40px;
    height: 450px;
  }
  /* here we giving style to icons text */
   .icon {
    font-family: "Noto Sans";
    font-weight: 600;
    font-size: 25px;
    width: 40%;
    float: left;
    margin-left: 40px;
    scale:80%;
    animation :slide-out 2s ease-in-out;
} 
/* here we giving style to icons */
	.material-icons{
    background-color: #007bc9;
    margin-right: 20px;
    margin-top: 20px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
		padding-bottom:10px;
		border-radius: 15px;
	}
  /* here we giving style to location icon  */
  .fas{
    background-color: #007bc9;
    margin-right: 20px;
    margin-top: 20px;
		padding-left: 13px;
		padding-right: 13px;
		padding-top: 10px;
		padding-bottom:10px;
		border-radius: 15px;
  }
/* here we giving style to map  */
  .map{
    margin:10px 20% 25px 10px;
    float: right;
    border-radius:10px;
    animation :slide-left 2s ease-in-out;
   
  }
  .map1{
    width:40%;
    height:90%;
    float:right;
  }
/* here we giving style to mobile view  */
  @media screen and (max-width: 700px) 
{
  .title1{
    height: 100px;
    padding-top:35px;
    padding-left: 50px;
    padding-bottom: 0px;
    font-size: 30px;
    width: 100%;
    
  }
  .material-icons{
    margin-left: 0px;
    font-size: 5px;
  } 
 .fas{
    margin-left: 0px;
  }  
  .icon{
    font-size: 20px;
    width: 100%;
    margin-left: 5px;
    scale:100%;
  }
   .map{
    width: 95%;
    height: 300px;
    margin:10px;
    float:left;
    margin-bottom: 50px;
    
   } 
   .map1
   {
    margin-top:20px;
    width:95%;
    height: 80%;
    margin-right: 3%;
   }  
} 
.container{
	position: relative;
    background-color: #FFFFFF;
    height: 800px;
    width: 100%;
    clear:right;
   margin-top: 100px;
}

	
.form-div {
    position: relative;
    background-color: #A8DADC;
    height: 63%;
    width: 63%;
    margin-left: auto;
    margin-right: auto;
    left: auto;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 17px 0px #000000;
    box-shadow: 0px 0px 17px 0px #000000;
    padding-top: 25px;
    padding-bottom: 0px;
    padding-left: 35px;
    margin-top: 28px;  
    animation :slide-top-bottom 15s ease-in-out;
       animation-timeline: view();
       animation-range: entry 0% cover 40%;  
  
}	
.form-title{
    font-size: 40px;
    font-weight: bold;
    color: #0090EC;
    font-family: Oxygen;
    text-align: center;
    border-style: none none dotted;
    margin-right: 41px;
    padding-bottom: 12px;
    padding-top: 0px;
	}
.user-details{
	 display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.input-box{
    width: calc(100%/2 - 20px);
    margin-top: 16px;
    outline: none;
    margin-left: 2px;
    margin-right: 16px;
    animation :slide-top-bottom 15s ease-in-out;
       animation-timeline: view();
       animation-range: entry 0% cover 40%;
}

.input{
    height: 40px;
    width: 90%;
    outline: none;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 5px;
    font-size: 16px;
    border-style: none;
}

.details{
    color: #141414;
    font-family: "Noto Sans";
    font-weight: 600;
    font-size: medium;
    margin-bottom: 5px;
	display: block;
	
}

.input:focus{
    border: thin solid #0090EC;    
}

	.input-area{
    width: 100%;
    margin-top: 16px;
    animation :slide-top-bottom 15s ease-in-out;
       animation-timeline: view();
       animation-range: entry 0% cover 40%;
	}

.input-text{
    height: 103px;
    width: 93%;
    outline: none;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 2px;
    padding-right: 5px;
    font-size: 16px;
    border-style: none;
    font-family: "Noto Sans";
}

.button{
    height: 45px;
    width: 100%;
    margin-top: 20px;
}
.submit{
    height: 100%;
    width: 95%;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 10px;
    border-style: none;
    color: #FFFFFF;
    font-family: Oxygen;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0px;
    background-color: #457B9D;
    margin-top: 7px;
}

.submit:hover{
    background-color: #5395BF;
}
	
	
.bottom-div{
    position: absolute;
    width:100%;
    max-width:100%;
    background-color: #3c4f63;
    height: 680px;
    margin-top: 90px;
    
}

.social-name {
  margin-top: 480px;
  text-align: center;
  color: #FFFFFF;
  font-family: Oxygen;
  font-weight: bold;
  font-size: 36px;

  animation :slide-in 15s ease-in-out;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

.social-icon {
  height: 60px;
  margin-top:20px;
  ol {
    position:absolute;
    top:2cm;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top:500px;
    padding:0;
    display:flex;
  }
  ol li {
    list-style: none;
  }
  
  ol li a {
    position: relative;
    width:60px;
    height:60px;
    display:block;
    text-align:center;
    margin:0 10px;
    border-radius: 50%;
    padding: 6px;
    box-sizing: border-box;
    text-decoration:none;
    box-shadow: 0 10px 15px rgba(0,0,0,0.3);
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
  }
  
  ol li a:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    text-decoration:none;
  }
  
  ol li a .fab {
    width: 100%;
    height:100%;
    display:block;
    background: linear-gradient(0deg, #fff, #ddd);
    border-radius: 50%;
    line-height: calc(60px - 12px);
    font-size:24px;
    color: #262626;
    transition: .5s;
  }
  
  ol li:nth-child(1) a:hover .fab  {
    color: #3b5998;
  }
  
  ol li:nth-child(2) a:hover .fab {
    color: #00aced;
  }
  
  ol li:nth-child(3) a:hover .fab {
    color: #dd4b39;
  }
  
  ol li:nth-child(4) a:hover .fab {
    color: #007bb6;
  }
  
  ol li:nth-child(5) a:hover .fab {
    color: #e4405f;
  }
}

.first{
      background-color: #ff7878;
}
.second{
  background-color: #3149ff;
}
.third{
  background-color: #2cff4c;
}
.fourth{
  background-color: #d82aff;
}

@media screen and (max-width: 700px) 
{
  .container{
    
    width: 100%;
    clear:both;
  }

  .input-box{
    width: 100%;
    margin-top: 6px;
    outline: none;
    margin-left: 2px;
    margin-right: 24px;
  }
  .form-title{
    font-size: 30px;
    margin-bottom: 6px;
	}

  .form-div{
    height: 67%;
    width:80%;
    animation: CSSscrollReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .input{
    height: 35px;
    width: 90%;
    outline: none;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 5px;
    font-size: 14px;
    border-style: none;
}
.details{
  font-size: 14px;
}
.input-area{
  width: 100%;
  margin-top: 6px;
}
.input-text{
  height: 60px;
  width: 84%;
}

.button{
  height: 40px;
  width: 100%;
  margin-top: 15px;
}
.submit{
  height: 100%;
  width: 89%;
}

 .bottom-div{
    background-color: #3c4f63;
    height: 700px;
    margin-top: 80px;
    width:100%
  }

  .social-name{
    padding-top: 30px;
    font-size: 25px;
  }

  .social-icon {
    height: 60px;
    margin-top:20px;
    
    ol {
      position:absolute;
      top:3cm;
      left:43%;
      transform: translate(-50%, -50%);
      margin-top:500px;
      padding:0;
      display:flex;
      scale: 85%;
    }
    ol li {
      list-style: none;
    }
    
    ol li a {
      position: relative;
      width:60px;
      height:60px;
      display:block;
      text-align:center;
      margin:0 10px;
      border-radius: 50%;
      padding: 6px;
      box-sizing: border-box;
      text-decoration:none;
      box-shadow: 0 10px 15px rgba(0,0,0,0.3);
      background: linear-gradient(0deg, #ddd, #fff);
      transition: .5s;
    }
    
    ol li a:hover {
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      text-decoration:none;
    }
    
    ol li a .fab {
      width: 100%;
      height:100%;
      display:block;
      background: linear-gradient(0deg, #fff, #ddd);
      border-radius: 50%;
      line-height: calc(60px - 12px);
      font-size:24px;
      color: #262626;
      transition: .5s;
    }
    
    ol li:nth-child(1) a:hover .fab  {
      color: #3b5998;
    }
    
    ol li:nth-child(2) a:hover .fab {
      color: #00aced;
    }
    
    ol li:nth-child(3) a:hover .fab {
      color: #dd4b39;
    }
    
    ol li:nth-child(4) a:hover .fab {
      color: #007bb6;
    }
    
    ol li:nth-child(5) a:hover .fab {
      color: #e4405f;
    }
  }
}