.fa {
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  margin: 3px 3px;
}

.fa:hover {
    color:yellow;
    opacity: 0.7;
    text-decoration:none;
}

.fa-facebook {
  color: white;
}

.fa-twitter {
  color: white;
}

.fa-linkedin {
  color: white;
}
.fa-instagram{
    color:white;
}
.fa-pinterest{
    color:white;
}
html {
  scroll-behavior: smooth;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
section{
width:100%;
}
.social{
    float:right; margin-top:-45px; margin-right:100px;
}
.container1{
width: 100%;
min-height: 540px;
background-image: url("../images/image1.jpg");
background: contain;
}
.img{
margin-left: 100px;
margin-top: -10px;
}
.frmm {
right: 0;
margin: 20px;
max-width: 260px;
padding: 30px;
background-color: white;
margin-top: -160px;
margin-left:840px;
}

.but {
background-color: #fbdd0d;
color:#000;
padding: 5px 18px;
border: none;
width: 94%;
margin-bottom: 20px;
margin: 15px;
margin-left: 0px;
animation: bounce 1.5s infinite;
}
@keyframes bounce {
  0% {
    tranform: translate(0, 4px);
  }
  50% {
    transform: translate(0, 8px);
  }
} 

.but:hover{
    color:white;
    cursor:pointer;
    background-color:#25224b;
    box-shadow: 15px 15px 15px 5px rgba(78, 72, 77, 0.219);
    transform: translateY(-2px);
    /*width: 200px;*/
    border-bottom: 3px solid #fbdd0d;
    border-radius: 0%;
}
input{
margin: 10px 0 22px 0;
background-color: #f2f2f2;
border: none;
padding:4px;

}
.drop{
margin: 10px 0 22px 0;
background-color: #f2f2f2;
border: none;
padding:4px;

}
/*input:hover{
  border-bottom: 5px solid #25224b;
  height: 3em;
  width: 200px;
  
}*/
textarea{
    
    background-color: #f2f2f2;
    border:none;
    padding:4px;
}
/*textarea:hover{
  border-bottom: 5px solid #25224b;
  height: 3em;
  width: 200px;
 
}*/
.wave-img{
margin-left: 1112px;
margin-top: -370px;
}
.container2{
width: 100%;
padding: 100px;
}
.btnn{
width: 120px;
padding:2px;
background-color: #fbdd0d;
border-color: #fbdd0d;
animation: bounce 1.5s infinite;
}
.btnn:hover{
    cursor:pointer;
    background-color:#25224b;
    border-color:#25224b;
    color:white;
    box-shadow: 15px 15px 15px 5px rgba(78, 72, 77, 0.219);
    transform: translateY(-3px);
    /*width: 160px;*/
    border-bottom: 5px solid #fbdd0d;
    border-radius: 0%;
}
.checked{
color:#EDD710;
}
.dot {
height: 40px;
width: 40px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
footer{
height: 300px;
width: 100%;
background-color:#1c1e4f;
overflow: hidden;
}
.b1{
margin-top: -30px;
}
.info{
color: white;
margin-left: 150px;
margin-top: 60px;
}
hr{
width: 90%;
background-color: white;
margin-top:50px;
text-align:center;
}
.whute{
margin-left: 750px;
margin-top: -50px;
}
.blue{
margin-left: 1000px;
}
.tr{
overflow: hidden;
}
.mainkuber{
margin-top: 20px;
margin-left: 40px;
}
.thetalk{
margin-top: 10px;
margin-right: 20px;
}
.mainfoot{
margin-left: 70px;
}
.wavesss{
margin-left:1065px;
margin-top: -140px;
}
.triang{
margin-top: -90px;
position: relative;
  animation-name: example;
  animation-duration: 6s;
  animation-direction: reverse; 
   animation-iteration-count: infinite;
    animation-timing-function: linear;
  
}
@keyframes example {
  0%   { left:0px; top:0px;}
  75%  { left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

.circle-we{
    position: relative;
  animation-name: example;
  animation-duration: 6s;
  animation-direction: reverse; 
   animation-iteration-count: infinite;
}
.mainwave{
margin-left: -210px;
margin-top: -90px;
}
.main-blue{
float: right;
}
.t{
margin-left: 800px;
}
.wemain{
margin-top: -120px;
}
.webox{
float: right;
}
.maintest{
margin-top: -90px;
}
.circlewe{
margin-top: -90px;
margin-left: 100px;
position: relative;
  animation-name: example;
  animation-duration: 6s;
  animation-direction: reverse; 
   animation-iteration-count: infinite;
}
.box{
    position: relative;
  animation-name: example;
  animation-duration: 6s;
  animation-direction: reverse; 
   animation-iteration-count: infinite;
}
.boxwe{
margin-left: 70px;
position: relative;
  animation-name: example;
  animation-duration: 6s;
  animation-direction: reverse; 
   animation-iteration-count: infinite;
}
.our-main{
margin-top: -60px;
}
.mm{
margin-left: 800px;
margin-top: -30px;
}
.loremm{
margin-top: -60px;
}
* {box-sizing:border-box}
/* The dots/bullets/indicators */
.dott {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.slide{
margin-left: 170px;
margin-top: 20px;
}
.arb{
margin-top: 30px;
margin-right: 60px;
}
.arba{
margin-right: 60px;
}
.first-txt { 
position: absolute; 
top: 290px; 
left: 25px; 
color: #fff;
} 
.first-txtt { 
position: absolute; 
top: 310px; 
left: 25px; 
color: #fff;
font-size: 12px;

} 
.slider{
/*margin-left: 550px;*/
margin-top: 20px;
}
.container1 {
margin: 0;
max-width: none;
background-repeat: no-repeat;
background-size: cover;
}
.container1 img {
margin-top: -35px;
margin-left: 3.5em;
}
.container1 h1,
.container1 p, footer p, footer h2, footer h3, footer h5 {
color: white;
}
.frmm {
right: 0;
margin: 30px;
max-width: 240px;
padding: 30px;
background-color: white;
}
.web1 {
margin-left: -60px;
}
.web2 {
margin-left: -60px;
}
.cre1 {
margin-left: 30px;
}
.cre2 {
margin-left: -50px;
}
.cat{
text-align: center;
font-size: 12px;
}
.cat h4{
font-size: 18px;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:red;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.gal1:hover .overlay {
  height: 100%;
  opacity:0.7;
  
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:red;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.gal1:hover .overlay {
  height: 100%;
  opacity:0.7;
  
}

.overlay1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:blue;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.gal2:hover .overlay1 {
  height: 100%;
  opacity:0.7;
  
}

.overlay2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:orange;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.gal1:hover .overlay2 {
  height: 100%;
  opacity:0.7;
  
}

.overlay3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:blue;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.gal2:hover .overlay3 {
  height: 100%;
  opacity:0.7;
  
}

.overlay4 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:green;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.gal1:hover .overlay4 {
  height: 100%;
  opacity:0.7;
  
}
.logo-test{
    margin-left:45px; margin-top:-20px;
}
.mad{
    padding-left:100px;
}
.overlay5 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:maroon;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.gal2:hover .overlay5 {
  height: 100%;
  opacity:0.7;
  
}

.effect {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.gal1{
max-width: 40%;
margin-left: 10%;
cursor:pointer;
}
.gal2{
max-width: 40%;
margin-right: 10%;
cursor:pointer;
}
.test{
background-color: #F5F4F4;
}
.btn1{
border-color:#F7E72F;
background-color: #1c1e4f;
color: white;
padding: 5px;
width: 190px;
}
.btn1:hover{
background-color:#fbdd0d;
color:#1c1e4f;
}
.btn2:hover{
background-color: #1c1e4f;
color:white;
}
.btn2{
padding: 5px;
width: 190px;
border-color: #F7E72F;
background-color: #fbdd0d;
}
.lorem{
	margin-left: 45px;
	margin-bottom: -25px;
}
.test1 {
  transition: box-shadow .3s;
  width: 300px;
  height: 400px;
  margin: 50px;
  border-radius:30px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  float: left;
  animation: bounce 1.5s infinite;
  
}
.test1:hover {
  box-shadow: 0 0 50px rgba(33,33,33,.2); 
  
   transition: transform 1.0s;
  transform-style: preserve-3d;
}
@media (max-width: 375px){
    textarea{
        max-width:185px!important;
    }
    .drop{
        max-width:185px;
margin: 10px 0 22px 0;
background-color: #f2f2f2;
border: none;
padding:4px;

}
    .mad{
        padding-left:15px;
    }
.web1 {
    margin-left: 0px!important;
}
.cre2{
    margin-left: 0px!important;
}
.ml-5{
    margin-left: -5px!important;
    margin-top:-97px;
}
.container1 img{
    margin-left:-4.0em;
}
.frmm{
    margin-left:20px;
    
}
.list-group{
    margin-left:15px;
}
.btn2{
    width:auto;
    margin-left:40px;
}
.btn1{
    width:auto;
}
.mainfoot{
    margin-left:12px;
}
.social{
    margin-top:-26px;
    margin-right:22px;
    font-size:13px;
}
.mainkuber{
    margin-left:0px;
    margin-top:0px;
}
.thetalk{
    margin-right:-20px;
}
.arb{
    margin-right:0px;
}
.arba{
    margin-right:-15px;
}
.web2{
    margin-left:-8px;
}
.web2 img{
   width:350px;
}
.bluewave1{
    display:none;
}
.circlewe{
    display:none;
}
.maintest{
    margin:30px;
}

/*@media (max-width: 1440px){
    .container1 img{
        margin-left:14.5em;
    }*/
    
}
@media (max-width: 320px){
    .drop{
margin: 10px 0 22px 0;
background-color: #f2f2f2;
border: none;
padding:4px;

}
    input{
    margin: 10px 0 22px -26px;
    }
}
@media (max-width: 720px){
    .drop{
    width:195px!important;
margin: 10px 0 22px 0;
background-color: #f2f2f2;
border: none;
padding:4px;
}
    .mad{
        padding-left:15px;
    }
   
    .test1{
        height:480px;
       
    }
   
    .main-blue{
        display:none;
    }
    .wavesss{
        display:none;
    }
    .maintest{
    margin:30px;
}
    .web1 {
    margin-left: 0px!important;
}
    .cre2{
    margin-left: 0px!important;
}
.ml-5{
    margin-left: -5px!important;
    margin-top:-97px;
}
.container1 img{
    margin-left:-4.0em;
}
.frmm{
    margin-left:20px;
    max-width:260px;
    
}
input{
    max-width:194px;
}
.but{
    width:95%;
}
.list-group{
    margin-left:15px;
}
.btn2{
    width:auto;
    margin-left:40px;
}
.btn1{
    width:auto;
}
.mainfoot{
    margin-left:12px;
}
.lamp{
   
    margin-top:-10px;
}

hr{
    margin-top:-10px;
}
.social{
    margin-top:-26px;
    margin-right:30px;
    font-size:13px;
    padding:5px;
}
.mainkuber{
    margin-left:0px;
    margin-top:0px;
}
.thetalk{
    margin-right:-20px;
}
.arb{
    margin-right:0px;
}
.arba{
    margin-right:-15px;
}
.web2{
    margin-left:-8px;
}
.web2 img{
   width:350px;
}
.bluewave1{
    display:none;
}
.circlewe{
    display:none;
}
}
@media (min-width: 1024px and max-width:1080px){
    .mad{
        padding-left:15px;
    }
    .web1 {
    margin-left: 0px!important;
}
    .cre2{
    margin-left: 0px!important;
}
.ml-5{
    margin-left: -5px!important;
    margin-top:-97px;
}
.container1 img{
    margin-left:-4.0em;
}

}
@media (max-width:1440px){
    .mad{
        padding-left:15px;
    }
    .frmm{
        max-width:260px;
       /* margin-left:-10px;*/

    }
}
.mainfoot a{
    color:#fff!important;
    text-decoration:none;
}