ul {
    list-style: none;
  }
  
  ul li:before {
    content: '✓';
    color:rgb(2, 123, 8);
    
  }
  .bg-gray-100{
    color:white;
    background-color: black;
  }
footer {
    background-image:url("footerbg.jpg");
    background-color: rgb(172, 241, 229);
}
body{
    background-image: url('bgi.jpg');
    background-color: azure;
    background-repeat: no-repeat;
  background-size: cover;
}
header{
        background-image:url("footerbg.jpg");
        background-color: rgb(69, 67, 67);
        color:black;
        position:relative;
        top:0;
        left:0;
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items: center;
        transition:0.6s;
       z-index: 100000;
}
header ul{
    position: relative;
    display:flex;
    justify-content:space-between;
        align-items: center;
}
header ul li:hover{
    position: relative;
    list-style:none;
    background-color: gray;
}
header ul li a{
    position: relative;
    text-decoration:none;
    color:black;
    font-weight:500px;
    transition:0.5s;
}
.banner{
    position: relative;
    width: 100%;
    height: 100vh;
}
hr{
    height:5px;
    
    border-radius:10px;
    background: linear-gradient(to left, black, gray);
}
.container{
width:100%;
text-align:center;
}
pre::before{
    content:'';
    position:relative;
    width:100px;
    height:3px;
    background-color: brown;
    bottom:-10px;
    left:50%;
    transform:translate(-50%);
    animation:animate 4s linear infinite;
    
}
section{
    margin-top:5px;
    margin-bottom:5px;
}
#heading{
    font-size:35px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color:black;
}
@keyframes animate{
    0%{
        width:100px;
    }
    50%{
        width:200px;
    }
    100%{
        width:200px;
    }
}
.images{
    width:90%;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:20px;
}
.pic{
    position:relative;
    height:230px;
    box-shadow: 3px 3px 4px lightgray;
}
.pic img{
    position:relative;
    height:100%;
    width:100%;
    border-radius:10px;
}
.container {
    position: relative;
    text-align: center;
    color: white;
  }
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
   
    color:black;
  }
  .splide {
    margin: 0 auto;
  }

  .thumbnails {
    display: flex;
    margin: 1rem auto 0;
    padding: 0;
    justify-content: center;
  }

  .thumbnail {
    width: 70px;
    height: 70px;
    overflow: hidden;
    list-style: none;
    margin: 0 0.2rem;
    cursor: pointer;
    opacity: 0.3;
  }

  .thumbnail.is-active {
    opacity: 1;
  }

  .thumbnail img {
    width: 100%;
    height: auto;
  }
  .container1{
    text-align:center;
  }