body, html {
    height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: #777;
    overflow-x:hidden;
}

#explore {
    text-align: center;
}
#front{
    color: #777;
    background-color:white;
    text-align:center;
    padding:50px 80px;
    text-align: justify;
    font-size:18px
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7,
.bgimg-8, .bgimg-9, .bgimg-10, .bgimg-11, .bgimg-12, .bgimg-13, .bgimg-14, .bgimg-15, .bgimg-16 {
   position: relative;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}

.bgimg-1 {
    background-image: url("p.jpg");
    min-height: 100%;
    background-size: cover;
    background-position: center;
}

.bgimg-2 {
    background-image: url("jt3.jpg");
    min-height: 700px;
    animation: img2 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-3 {
    background-image: url("s1.jpg");
    min-height: 700px;
    animation: img3 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-4 {
    background-image: url("bae2.jpg");
    min-height: 700px;
    animation: img4 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-5 {
    background-image: url("chaura3.jpg");
    min-height: 700px;
    animation: img5 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-6 {
    background-image: url("R4.jpg");
    min-height: 700px;
    animation: img6 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-7 {
    background-image: url("bade5.jpg");
    min-height: 700px;
    animation: img7 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-8 {
    background-image: url("p6.jpg");
    min-height: 700px;
    animation: img8 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-9 {
    background-image: url("bison2.jpg");
    min-height: 700px;
    animation: img9 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-10 {
    background-image: url("A2.jpg");
    min-height: 700px;
    animation: img10 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-11 {
    background-image: url("dhop3.jpg");
    min-height: 700px;
    animation: img11 9s infinite; 
    background-size: cover;
    background-position: center;
}

.bgimg-12 {
    background-image: url("r.jpg");
    min-height: 700px;
    /*animation: img12 9s infinite;*/ 
    background-size: cover;
    background-position: center;
}
.bgimg-13 {
    background-image: url("gv3.jpg");
    min-height: 700px;
    animation: img13 9s infinite; 
    background-size: cover;
    background-position: center;
}
.bgimg-14 {
    background-image: url("gupt2.jpg");
    min-height: 700px;
    animation: img14 9s infinite; 
    background-size: cover;
    background-position: center;
}
.bgimg-15 {
    background-image: url("pd3.jpg");
    min-height: 700px;
    animation: img15 9s infinite; 
    background-size: cover;
    background-position: center;
}
.bgimg-16 {
    background-image: url("bd1.jpg");
    min-height: 700px;
    animation: img16 9s infinite; 
    background-size: cover;
    background-position: center;
}

@keyframes img2 {
    33.33% { background-image: url('jt2.jpg'); }
    66.66% { background-image: url('jt1.jpg'); } 
  }

.caption {
    position: absolute;
    left: 0;
    top: 20%;
    width: 100%;
    text-align: center;
    color: #000;
}

.border {
    letter-spacing: 10px;
    background-color:transparent;
    font-size:50px;
    color: #f7f7f7;
}

.data{
    color:#ddd;
    background-color:#282E34;
    text-align:center;
    padding:50px 80px;
    text-align: justify;
}

.dev{
    position:relative;
}

h3 {
    letter-spacing: 5px;
    text-transform: uppercase;
    font: 25px "Lato", sans-serif;
    color: #111;
}

.indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    /*animation: effect 10s infinite; */
}

.indicator {
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.indicator:nth-child(1) {
    animation: changeIndicator1 9s infinite;
}

.indicator:nth-child(2) {
    animation: changeIndicator2 9s infinite;
}

.indicator:nth-child(3) {
    animation: changeIndicator3 9s infinite;
}

@keyframes changeIndicator1 {
    0%, 33.33% {
        background: rgba(255, 255, 255, 1);
    }
    33.34%, 100% {
        background: rgba(255, 255, 255, 0.5);
    }
}

@keyframes changeIndicator2 {
    0%, 33.33% {
        background: rgba(255, 255, 255, 0.5);
    }
    33.34%, 66.66% {
        background: rgba(255, 255, 255, 1);
    }
    66.67%, 100% {
        background: rgba(255, 255, 255, 0.5);
    }
}

@keyframes changeIndicator3 {
    0%, 66.66% {
        background: rgba(255, 255, 255, 0.5);
    }
    66.67%, 100% {
        background: rgba(255, 255, 255, 1);
    }
}

.indicator.active {
    background: rgba(255, 255, 255, 1);
}

@keyframes img3 {
    33.33% { background-image: url('s3.jpg'); } 
    66.66% { background-image: url('s2.jpg'); } 
  }
  @keyframes img4 {
    33.33% { background-image: url('B1.jpg'); } 
    66.66% { background-image: url('bae1.jpg'); } 
    /*75% { background-image: url('B3.jpg'); } */
  }
  @keyframes img5 {
    33.33% { background-image: url('chaura5.jpg'); } 
    /*50% { background-image: url('C3.jpg'); } */
    66.66% { background-image: url('chaura2.jpg'); } 
  }
  @keyframes img6 {
    33.33% { background-image: url('R1.jpg'); } 
    66.66% { background-image: url('R2.jpg'); }
  }
  @keyframes img7 {
      33.33% { background-image: url('bada1.jpg'); } 
    66.66% { background-image: url('bade4.jpg'); } 
    /*60% { background-image: url('BM1.jpeg'); } 
    80% { background-image: url('bade3.jpg'); }*/ 
  }
  @keyframes img8 {
    /*25% { background-image: url('p1.jpg'); } */
    33.33% { background-image: url('pandav.jpg'); } 
    66.66% { background-image: url('pandav1.jpg'); } 
  }
  @keyframes img9 {
    33.33% { background-image: url('blm1.jpg'); } 
    66.66% { background-image: url('bison3.jpg'); } 
    /*75% { background-image: url('bison2.jpg'); } */
  }
  @keyframes img10 {
    33.33% { background-image: url('A3.jpg'); }
    66.66% { background-image: url('A5.jpg'); } 
  }
  @keyframes img11 {
    /*25% { background-image: url('dhop2.jpg'); } */
    33.33% { background-image: url('dhop1.jpg'); } 
    66.66% { background-image: url('D2.jpg'); } 
  }
  /*@keyframes img12 {
      33.33% { background-image: url('vp1.jpg'); } 
      66.66% { background-image: url('pcm.jpg'); } 
      50% { background-image: url('vp2.jpg'); } 
  }*/
  @keyframes img13 {
    33.33% { background-image: url('gv2.jpg'); } 
    66.66% { background-image: url('gv1.jpg'); } 
  }
  @keyframes img14 {
      33.33% { background-image: url('gupt1.jpg'); } 
      66.66% { background-image: url('gv1.jpg'); } /*TODO*/
  }
  @keyframes img15 {
    33.33% { background-image: url('pd2.jpg'); } 
    66.66% { background-image: url('pd1.jpg'); } 
  }
  @keyframes img16 {
    33.33% { background-image: url('bd2.jpg'); } 
    66.66% { background-image: url('bd3.jpg'); } 
    /*75% { background-image: url('bd4.jpg'); } */
  }

  .eee{
    opacity: 0;
}

.capt{
  position: absolute;
  top: 55%;
  width: 100%;
  text-align: center;
  color: gold;
  background-color:transparent;
  padding: 18px;
  font-family:cursive;
  font-size: 35px;
  letter-spacing: 6px;  
  text-shadow: 4px 4px 8px rgba(30, 117, 4, 0.662);
}


@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
    img {
        max-width: 100%; 
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7,
    .bgimg-8, .bgimg-9, .bgimg-10, .bgimg-11, .bgimg-12, .bgimg-13, .bgimg-14, .bgimg-15, .bgimg-16 {
        background-attachment: scroll;
        min-height: 250px;
        background-size: cover;
        background-position: center;   
    }

    img {
        max-width: 100%;
        height: auto; 
        background-size: cover;
        background-position: center;   
    }
    h3 {
        font-size: 12px !important;
    }
    .border{
        font-size: 20px !important;
        font-weight: bold !important;
    }
    p{
        font-size:16px !important;
    }
    .data{
        padding: 30px 30px !important;
    }
    .capt{
        padding: 2px 2px !important;
        letter-spacing: 1px !important;
        top: 0px;
    }
    .end{
        opacity: 0;
        font-size: 8px;
    }
    .eee{
        font-size: 8px;
        opacity: 1;
    }

}