html,body{
  margin: 0;


}

html{
  scroll-behavior:smooth;
}





.Herocard{

  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(0,211,255,1) 100%);
  /* Sizing */
  width: 100%;
  height: 100vh;

  /* Flexbox stuff */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Text styles */
   text-align: center;

}
.Herocard h1{
  font-size: 5em;
  /* Margins */


}

.lead{
  padding: 1%;
}
.Herocard h2{

}
.Herocard h3{

}


.container-fluid{
overflow: hidden;

}





 .body1{
  color: red;
  background-color: black;
  border: 1px solid red;
}

.mocukuphero{

  text-align: left;


}

.alb img{
height: 50%;
width: 50%;
padding-bottom: 3%;

}
.alb{
  text-align: center;
}
.section{
width: 100%;
}
.section1 h1{
text-align: center;
}


.section2{

float: left;
width: 33%;
height: 80%;


}

.body2{
  margin:0;
  height: 100%;

}
#process1{
  border: 1px solid red;
}

.sec3{

  width: 100%;

}
.sec3 p{
  padding: 3%;
}
.sec3 h2{
  text-align: center;
}

#goalsec p{
  color: #007be5;
 font-size: 22px;
 font-weight: bolder;
}

#textHL{
color: #007be5;
font-weight: bold;
}

.section2 h3{
  font-size: 18px;

  text-align: center;
}

.sec4{

  width: 100%;
  border-radius: 25px 25px 0px 0px;
}

.containerlink{
  width: 277px;
  height: 356px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 20px lightgrey;



}

#proposalhead{
  font-size: 24px;

}

.containerlink img{
  height: 100%;
  width: 100%;

}

.overlay{
  position:absolute;
  top: 0%;
  left: 0%;
  right: 0%;
bottom: 0%;
opacity: 0%;
transition: opacity 0.4s ease-in-out;
background: black;
cursor: pointer;

}

.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;

}

.containerlink:hover .overlay{
  opacity: 0.6;
}

.linksec{
  position: relative;
  width: 100%;
  height: 356px;



}


#Zeffectpic{
  display: block;
  margin: auto;
  width: 95%;

  border-radius: 25px;
  box-shadow: 5px 5px 8px grey;

}

#spepic{
  display: block;
  margin: auto;
  width: 95%;

  border-radius: 25px;
  box-shadow: 5px 5px 8px grey;
}

#millerpic{
  display: block;
  margin: auto;
  width: 95%;

  border-radius: 25px;
  box-shadow: 5px 5px 8px grey;
}

#goalsec{
margin: auto;
width: 90%;

  border-radius: 25px 25px 25px 25px;

}


.sec4 p{
    padding: 2%;
}

.sec4 h2{
text-align: center;

}

.sec5
{
width: 100%;
text-align:center;

}

.iframe{
  display:block;
   Margin:Auto;
}
.conceptsec{

    border-radius: 25px 25px 25px 25px;
}

.featurette-heading{
  padding: 1%;
}
.psec1{
  float: left;
  width: 33%;
  border: 1px solid red;
}

.scroll-down{
  height: 50px;
  width: 30px;
  border: 1px solid black;
  position: absolute;
  left: 50%;
  bottom: 20px;
  border-radius: 50px;
  cursor: pointer;

}

.scroll-down::before,
.scroll-down::after{
  content: '';
  position: absolute;
  top: 10%;
  left: 33%;
  border: 2px solid black;
  height: 10px;
  width: 10px;
  transform: translate(-50%, -100%);
  transform: rotate(45deg);
  border-top: transparent;
  border-left: transparent;
animation: scroll-down 1s ease-in-out infinite ;
}
.scroll-down::after{
  top:10%;
  animation-delay: .3s;
}
@keyframes scroll-down {
  0%{
    opacity: 0;
  }
  30%{
    opacity: 1;
  }
  60%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    top: 76%;
}
