footer{
  color: white;
  background-color: black;
  padding: 2rem 0;
}
.social a{
  font-size: 1.4rem;
  padding: 0 .4rem;
}
.social a:hover{
opacity: .5;
}
/*------------ video ------------*/

header {
  position: relative;
  background-color: black;
  height: 91vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position:absolute;
  top: 0;
  left: 0;
  width: 1520px;
  height: 420px;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

.overlay img{
transform: translateY(-430px);
}

.ann{
  background-color: red !important;
}

/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  /* header {
     background: url("img_ydk/jpg") black no-repeat center center scroll; 
  } */

  header video {
    display: block;
  }
}
/*------------ video ------------*/


/* ------------ listgroup ----------- */
.list-group{
  margin-top: 1rem;
  align-items: center;
}





/*------------ peoplecards -----------*/
.card{
  background-color: #fffefb;
  /* background-color: #c0ac72; */
  border: none;
  margin: 0;
}
.card-img-top{
  height: 60%;
}
.card-group .card{
  margin: 0;
  border-radius: none;
}
.card-group{
  width: 100%;
}

.grid-items{
  grid-template-columns:repeat(2, 1fr) ;gap: 5rem !important;
  padding: 0 4rem;
}

.card-group-1 img:hover{
  filter: grayscale(60%);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: .3s;
}
/*------------ peoplecards -----------*/




*{box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  html{
    scroll-behavior: smooth;
  }
  body{
    background-color: #fffefb;
   /* background-color: #c0ac72; */

    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 10px;
  }

  /* ----------navbar---------- */
  .name{
    font-size: 1.4rem !important;
    transition: all .3s;
    letter-spacing: 1px;
    color: #fffefb;
  }
  .names{
    font-size: 1rem !important;
    transition: all .3s;
    letter-spacing: 1.1px;
    color: #fffefb;
  }
  .name-active{
    font-size:1.3rem !important;
  }
  .names-active{
    font-size:1.3rem !important;
  }
  .animate__heartBeat {
    --animate-duration: 6s;
  }
  .mt-nav{
    margin-top: 72px;
  }
  .navbar{
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.4rem 0;
    /* box-shadow: 0 3px 8px -6px rgb(220, 220, 220) !important; */
    background-color: #000000;
    z-index: 5;
    transition: all .3s;
  }
  .navbar1{
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.4rem 0;
    /* box-shadow: 0 3px 8px -6px rgb(220, 220, 220) !important; */
    background-color: #000000;
    z-index: 5;
    transition: all .3s;
  }
  .active-nav{
    position: fixed ;
    width: 100%;
    padding: .7rem 0;
    box-shadow: 0 3px 8px -6px rgb(184, 184, 184) !important;
  }
  .active-nav a{
    color: black;
  } 
  .navbar .container{
    padding: 0;
    margin:0 auto;
  }
  .navbar1 .container{
    padding: 0;
    margin:0 auto;
  }
  nav a:hover{
    opacity: 0.8;
    color: black;
  }

  .press-lg-font-size{
    font-size: .8rem;
  }
  .down_click{
    margin-top: 12rem;
  }

  /* a */
  a{
    color:inherit;
    text-decoration: none;
  }
  a:hover{
    color:inherit;
    text-decoration: none;
  }
  /* a */

  /* btn */
  .btn-primary{
    background-color: #091b32;
  }
  .btn {
    padding: .4rem .7rem;
    border-radius: 1rem;
    font-size: .8rem;
  }
  /* btn */


  
  
  /*---------------mobile-------------*/
  
@media(max-width:575.98px){

  .card-img-top{
    height: 50%;
  }

  .grid-items{
    display: grid;
    grid-template-columns:repeat(2, 1fr) ;
    gap: 1rem !important;
    padding: 0 .9rem;
}
  .grid-items img{
    width: 100%;
    max-height: 11rem;
}
  .card-group-1 .card-title{
    margin-bottom: .4rem;
  }
  .card-body h6 {
      font-size: 1rem;
  }  

  .mobile-none{
    display: none;
  }

  .down_click{
    margin-top: 7rem;
  }

  .btn {
    padding: .4rem .7rem;
    border-radius: 1rem;
    font-size: .7rem;
  }


  body{
    font-size: 13px !important;
  }

  .navbar{
    padding: 1rem 0 ;
  }
  .navbar1{
    padding: 1rem 0 ;
  }
  .active-nav{
    padding: .7rem 0;
  }
  .navbar-collapse{
    padding: 1rem 0 0 1rem;
    height: 100vh;
  }
  .navbar1-collapse{
    padding: 1rem 0 0 1rem;
    height: 100vh;
  }
  .container{
    padding: 0 2rem;
  }
  
  .navbar-brand{
    padding-left: 1.2rem;
  }
  .navbar1-brand{
    padding-left: 1.2rem;
  }
  
  .name{
    font-size: 1.2rem;
  }
  .names{
    font-size: 1.2rem;
  }
  /*-----* header--------- */

}

@media(min-width:576.2px ) and (max-width:767.98px){
  .grid-items{
    display: grid;
    grid-template-columns:repeat(2, 1fr) ;gap: 1rem;
    padding: 0 1.1rem;
  }
  .grid-items img{
    width: 100%;
    max-height: 15rem;
  }
}

@media(min-width:1200px){

.navbar .container{
  display: flex;
  justify-content: center;
  padding: 0 2rem;
  max-width: 1300px;
}
.navbar1 .container{
  display: flex;
  justify-content: center;
  padding: 0 2rem;
  max-width: 1300px;
}
}

@media(min-width:1550px){

.card-img-top{
  height: 70% ;
}
}
  /*---------------mobile-------------*/