body, html {
    
    background-color: rgb(235, 235, 235);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url('../imgs/cardbg1.jpg');
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.navbar
{
    padding-left: 20%;
    padding-right: 20%;

    background-color: rgb(235, 235, 235);
}

.nav-link
{
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navbar a
{
  font-size: large;
}
.navbar-brand img
  {
    width: 200px;
  }

@media screen and (max-width: 600px) {
  .navbar-brand img
  {
    width: 150px;
  }
}

.bg-top {

    position: absolute;
    /* Full height */
    height: 100%; 
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }


  .parallax {
    /* The image used */
    
  
    /* Full height */
    height: 100%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */

    background-image: url("../imgs/bg3.jpg");

  /* Set a specific height */
  height: 50%;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  color: rgb(255, 255, 255);
}

.hackednote
{
    position: fixed;
    left: auto;
    right: 15px;
    bottom: 15px;
    border-radius: 16px;
    background-color: rgb(138, 19, 19);
    color: aliceblue;
    box-shadow: 10px 10px 8px black;
    width: 200px;
    z-index: 1;
}

.slide2
{
  color: rgb(255, 255, 255);
  padding-top: 10%;
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../imgs/hackSlide.png");
}

.slide3
{
  padding-top: 10%;
  position: relative; 
  background-image: url("../imgs/bg4.jpg");
  width: 100%;
  height: 100%;
  color: whitesmoke;
}

.slide4
{

  padding-top: 10%;
  position: relative; 
  background-image: url("../imgs/sec4.png");
  width: 100%;
  height: 100%;
  color: rgb(255, 255, 255);
}
.slide5
{
  padding-top: 10%;
  position: relative; 
  background-color: rgb(25, 40, 73);
  background-image: url("../imgs/hippaSlide.png");
  width: 100%;
  height: 100%;
  color: rgb(255, 255, 255);
}
.section6
{
    margin-top: 20px;
    padding-top: 50px;
    position: relative; 
    background-color: black;
    width: 100%;
    height: 70%;
    color: rgb(0, 0, 0);
}

.swiper {
  margin-top: 50px;
  width: 100%;
  height: 40rem; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: rgb(50, 61, 92);

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;


}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card {
  margin: 30px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 25px; /* 5px rounded corners */
}

.card h4
{
  padding-top: 1rem;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
  border-radius: 5px 5px 0 0;
}

.whatwedo
{
  margin-top: 0%;
}
.services
{
  padding-top: 10px;
  height: 100%;
}


.videos
{
  margin-top: 1rem;
  padding-top: 50px;
  background: rgb(37,134,152);
  background: -moz-linear-gradient(333deg, rgba(197, 197, 197,.2) 0%, rgb(1, 68, 30) 100%);
  background: -webkit-linear-gradient(333deg, rgba(197, 197, 197,.2) 0%, rgba(0, 68, 30) 100%);
  background: linear-gradient(333deg, rgb(197, 197, 197, .2) 0%, rgb(0, 68, 30) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#258698",endColorstr="#2f2f2f",GradientType=1); 
  color: aliceblue;
  padding-bottom: 100px;
  box-shadow: 1px 1px 18px #3d3d3d;
}
.lectures
{
  margin-top: 2rem;
  padding-top: 50px;

  color: rgb(0, 0, 0);
  padding-bottom: 100px;
}
.aboutus
{
  margin-top: 1rem;
  padding-top: 100px;
  background: rgb(37,134,152);
  background: -moz-linear-gradient(333deg, rgba(1, 68, 30) 0%, rgba(197, 197, 197,.8) 100%);
  background: -webkit-linear-gradient(333deg, rgba(1, 68, 30) 0%, rgba(197, 197, 197,.8) 100%);
  background: linear-gradient(333deg, rgba(1, 68, 30) 0%, rgba(197, 197, 197,.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#258698",endColorstr="#2f2f2f",GradientType=1); 
  color: rgb(0, 0, 0);
  padding-bottom: 100px;
}

/* The close button */
.closebtn {
  margin-right: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
  position: fixed;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

li {
list-style-type: none;
}
ul {
list-style-type: none;
}