* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  h1{
    text-align: center;
  }
  
  p{
    text-align:center;
  }
  
 
  

 






  
    
   
   /* parallax */
   
   #parallax{
    
      position:relative;
      width: 100%;
      height: 100vh;
      display:flex;
      justify-content: center;
      align-items: center;
   }
   
   #parallax img{
       position:absolute;
       bottom:0;
       left:0;
       width:100%;
       pointer-events: none;
   
    }
    
    #parallax img#lamp{
        mix-blend-mode: screen;
    }
    
    #parallax img#masjid{
       transform: translateY(-20px);
   }
   
   #parallax img#stars2{
       display: none;
   }
   
   
   
   .sec{
       height:auto;
       z-index: +1;
       background-color: #222;
       position: relative;
       
   }
  
  


        
   
           #parallax img#stars2{
               display: block;
               width:100%;
               height: 70%;
               object-fit: cover;
           } 
           #parallax img#masjid{
               transform: translateY(-5 px);
           }
   
           #text{
               font-size:15
           }
   
















  
  

 





  
  
  @media (min-width: 768px){
  .logo {
      margin-top: 5px;
  }
  }
  
  


  @media(max-width:2600px){
  
  
   
    }







  @media(max-width:1550px){
  
  
   
  
    }




  @media(max-width:1180px){
  
  
  .top ul li {
    position: relative;
    float: left;
    width: 25%; 
    height: 25%; 
    overflow: hidden;
  }
  #parallax{
    height: 100vh;
 }


  }
  
  @media(max-width:992px){
  .top ul li {
    position: relative;
    float: left;
    width: 50%; 
    height: 30%;  
    overflow: hidden;
  }
  #parallax{
    height: 50vh;
 }

  }
  
  @media(max-width:882px){
  .top ul li {
    position: relative;
    float: left;
    width: 50%; 
    height: 30%; 
    overflow: hidden;
  }
  #parallax{
    height: 45vh;
 }
  }
  
  @media(max-width:680px){
  .top ul li {
    position: relative;
    float: left;
    width: 50%; 
    height: 30%;  
    overflow: hidden;
  }
 
  }
  
  @media(max-width:550px){
  .top ul li {
    position: relative;
    float: left;
    width: 100%; 
    height: auto; 
    overflow: hidden;
  }
  }
  @media(max-width:450px){
  .top ul li {
    position: relative;
    float: left;
    width: 100%; 
    height: auto; 
    overflow: hidden;
  }
  #parallax{
    height: 30vh;
 }
  }
  @media(max-width:380px){
  .top ul li {
    position: relative;
    float: left;
    width: 100%; 
    height: auto; 
    overflow: hidden;
  }
  #parallax{
    height: 30vh;
 }
  }
  @media(max-width:360px){
   
    #parallax{
      height: 30vh;
   }
  }