* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
  body {
    margin: 0;
    padding: 0;
   
  }
  main:before{
    content: "";
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color: black;
    z-index:-1;
    opacity: 0.2;

  }
  .initial-slide{
    position: absolute;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;

   z-index: -55;
    object-fit: cover;
  }
 .slider{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  z-index:-5;

 }

.slide{
  position: absolute;
  width:100%;
  height: 100%;
  top:0px;
  left:0px;
  opacity: 0;
 
  object-fit: cover;
 z-index: -1;

  transition: all 2s ease-in-out;
}
.show-background{
  opacity:1;
  z-index: -1;
  
}








  .banner {
    padding: 0;
    margin: 0;
  }
  
  .banner a {
    display: block;
    padding: 20px 13px;
    background-color: rgb(26, 84, 110);
    transition: background-color 0.4s ease, color 0.4s ease;
  }
  
  .banner a:hover {
    background-color: rgba(13, 6, 31, 0.6);
    color: beige;
  }
  
  nav {
    background-color: rgba(47, 55, 73, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
  
  .menu-list {
    display: flex;
    justify-content: center;
    font-size: 28px;
    margin: 0;
    padding: 0;
    align-items: center;
   
  }
  
  .hide {
    visibility: hidden;
  }
  
  .home-list {
    visibility: hidden;
    position: absolute;
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: rgb(10, 52, 49);
    font-size: 15px;
    
    transition: all 0.4s ease;
  }
  
  ul li a {
    display: block;
    padding: 20px 22px;
    transition: all 0.35s ease;
  }
  
  ul li a:hover,
  ul li a:active {
    color: white;
    opacity: 0.8;
    background-color: rgba(13, 6, 31, 0.2);
  }
  
  .home:hover .home-list {
    visibility: visible;
    height: 142px;
    opacity: 1;
    background-color: rgba(13, 6, 31, 0.4);
    transition: all 0.44s ease;
  }
  
  .home-list a {
    padding: 10px 44px;
  }
  
  .icon-menu,
  .icon-cross {
    visibility: hidden;
    position: absolute;
  }
  
  .welcome {
    display: flex;
    justify-content: center;
    align-items: center;
  
    opacity:.5;
 
    font-size: larger;
    top: 30%;
    left: 20%;
    width: 70%;
   
    background-color: rgba(26, 84, 110,.1);
    height:400px;
    padding:20px 20px

  }
  
  .input-search {
    display: block;
    outline: none;
    border: none;
    caret-color: #061a11;
 
    color: rgb(12, 41, 12);
    padding: 0;
    font-size: 15px;
    background-color: #f0f0f0;
    width: 100px;
    text-align: center;
  }
  
  .input-search:focus,
  .input-search:active {
    outline: none;
    border: none;
    caret-color: #061a11;
  
    color: rgb(18, 94, 18);
    margin-left: 5px;
    font-size: 15px;
    background-color: #f0f0f0;
    width: 150px;
    transition: all 0.3s ease;
    z-index: 2;
  }
  
  .search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    border-radius: 5px;
    padding: 0 4px;
    margin-right: 15px;
    background-color: #f0f0f0;
  }
  
  .icon-search {
    color: rgb(15, 41, 68);
  }
  .intro{
    display:inline;
    font-size: 40px;
    margin-bottom: 22px;
    background-color:rgba(8, 40, 38,0.3);
    border-radius: 10px;
    border-radius: 10px;
    
  }
  main  p.discription{
  background-color:rgba(8, 40, 38,0.4); 
  display: inline-block;
  border-radius: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:80vh;
  }

  footer{
    width:50%;
    margin:0px auto;
    text-align: center;
    color:#353541
  }
  footer p, footer span{
   color: #e4e4ed;
   background-color: rgba(13, 6, 31, 0.4);
  }

  .contact-us button{
    display: block;
    padding: 10px 25px;
    border:1px solid rgb(255, 250, 250);
    color:whitesmoke;
    background-color: rgba(13, 6, 31, 0.6);
   transition: all .33s ease;
  }
  .contact-us button:hover{
    border:1px solid rgba(30, 142, 194, 0.2);
    background-color: rgba(5, 41, 75, 0.6);
  
  }
  /* body {
    background-image: url('https://images.pexels.com/photos/323775/pexels-photo-323775.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'), url('https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'), url('https://images.pexels.com/photos/106399/pexels-photo-106399.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    background-size: cover;
    animation: flicker 3s infinite;
} */
















  @media only screen and (max-width:555px){
    nav{
      overflow: hidden;
       font-size: 12px;
      margin:0px auto;
  
    
    }
    footer{
      font-size: 14px;
    }
    .intro {
      font-size:25px ;
    }
    .discription{
      font-size:15px;
    }
    .banner a {
      display: block;
      position: relative;
      font-size: 15px;
      background-color: rgba(11, 68, 61, 0.464);
     
      padding:15px 25px;
      padding-left:68px;
      
      transition: background-color 0.4s ease, color 0.4s ease;
    }
    .menu-list{
      visibility: hidden;
    }

    
    ul li a {
      display: block;
      padding: 0px 0px;
      transition: all 0.35s ease;
    }
    .input-search{
      width:100px;
 
    }
    .input-search:focus,
    .input-search:active {
      outline: none;
      border: none;
      caret-color: #061a11;
    
      color: rgb(18, 94, 18);
      margin-left: 5px;
      font-size: 15px;
      background-color: #f0f0f0;
      width: 95px;
      transition: all 0.3s ease;
      z-index: 2;
    }

    .search-container{
      position: relative;
      left:-12%;
      margin-right:20px;
    }

    .icon-menu{
      display:block;
      visibility: visible;
      position: absolute;
      left:2%;
      padding:13px 13px;
      font-size: 22px;
      z-index: 22;
    }

    .home ul li a:hover{
      background-color: rgb(23, 59, 89);

    }
   
    .home-list {
      visibility:hidden;
      position: absolute;
      left:-200px;
      top:64px;
      height: 0;
      overflow: hidden;
      opacity: 0;
      background-color: rgb(10, 52, 49);
      font-size: 15px;
      
      transition: all 0.4s ease;
    }

    .show-menulist{
      position: absolute;
      top:64px;
      left:0px;
       background-color: rgba(13, 6, 31, 0.4);
      visibility: visible;
      height:166px;
      opacity: 1;
      
    }
    
    .icon-cross{
      display: block;
      visibility: visible;
      position: absolute;
      left:2%;
      padding:13px 13px;
      font-size: 22px;
      z-index: 2;
    }
  
    

    .hide{
      display:none;
    }
  }