@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body{
  overflow-x: hidden;
  font-family: 'lato', sans-serif;
  color:#000;
}

.navbar-brand img{
  height: auto;
  width:100px;
}
.nav-link{
  color:#FFF;
}
/* *****************videosize ***************/
.video-container {
  position: absolute;
  top: 0;
  bottom: 10;
  left: 0;
  width: 90vw;
  height: auto; 
  overflow: hidden;
  object-fit: cover;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 90%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/*------------FOOTER ---------------------*/
.footer {
  position: fixed;
  height: 60px;
  bottom: 0;
  width: 100%;
 
}

/*============= COURSE SECTION =============*/

.col-md-8 {
  margin: 2rem auto 0;
  padding-top: 300px;
}
.col-md-8 h1 {
    font-size: 1rem;
  }
.btn-secondary {
  border-width: medium;
  border-radius: 0;
  padding: .6rem 1.2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 1rem;
  border-color: #1EBBA3;
  background-color: #1EBBA3;
  color: white;
}
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: #189582;
  background-color: #189582;
  color: white;
}

h6{
color: #FFF;
}

.imgTransparant {
  position: absolute;
  top: 30%;
  left:auto;
}

.img-fluid{
  max-width: 100%; 
  height: auto;
}
/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/

@media (max-width: 768px) {
  .navbar {
      background-color: #353333;
      background-color: rgba(0, 0, 0, 0.8); /* Black with 80% opacity */
  }
}