.scroll{
        position: absolute;
        display:flex;
        top:0px;
        background-color:transparent;
        height:50%;
        width:50%;
      }
.s7511932245709721028479229324715933942291721013488863{
  position:fixed;
  display:flex;
  height:100%;
  width:100%;
  top:0%;
  left:0;
  background-color: #bee2f5;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:visible;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  animation:dddf 3s;
  animation-fill-mode:forwards;
  z-index:134;
}
@keyframes dddf{
  0%{
    
  }
  80%{
        display:flex;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  100%{
    display:none;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
}
.logo{
  position:absolute;
  display:flex;
  height:53.5px;
  width:180px;
  overflow:visible;
  background-color:transparent;
  top:27px;
  left:4%;
  transform:scale(1.3);
  z-index:1;
}
.logoimg{
  position:absolute;
  display:flex;
  height:100%;
  width:30%;
  background-color:transparent;
  border-radius: 50%;
  overflow:hidden;
}
.logoimg img{
  height:100%;
  width:100%;
  object-fit:cover;
}
.logoname{
  position:absolute;
  display:flex;
  height:100%;
  width:115%;
  left:52%;
  background-color:transparent;
  justify-content:start;
  align-items:center;
  transform:scale(1.3);
}
.logoname h1{
  color:#e4e4e6;
  font-size:11px;
  line-height:1.2em;
}
.logoword1{
  position:absolute;
  display:flex;
  transform:translate(0,-100%);
}
.logoword2{
  position:absolute;
  display:flex;
  transform:translate(0,5%);
  word-spacing:3em;
}
.logoword3{
  position:absolute;
  font-weight:500;
}
.lines{
        display:flex;
        position:fixed;
        height:70px;
        width:30px;
        left:90%;
        top:45px;
        background-color:transparent;
        z-index:4;
        flex-direction:column;
    }
.line{
  position:absolute;
  display:flex;
  height:4.5%;
  width:90%;
  background-color:transparent;
  border-radius:60px;
  z-index:-2;
}
.line::before{
  content:"MENU";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:0%;
  background-color:transparent;
  border-radius:60px;
  z-index:2;
  color:#e4e4e6;

  font-size:20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
letter-spacing: 0px;
line-height: 1;
word-spacing: 2px;
font-weight: 700;
text-decoration: none solid rgb(68, 68, 68);
font-style: normal;
font-variant: normal;
text-transform: none;
  opacity:0;
  animation:linefuncaf 0.3s;
  animation-fill-mode:forwards;
  animation-delay:0.8s;
}
.line::after{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:300%;
  background-color:transparent;
  border-radius:60px;
}
.linefunc{
}
.linefunc::before{
  top:-50%;
  animation:linefuncbe 0.3s;
  animation-fill-mode:forwards;
}
.linefunc::after{
  top:300%;
  animation:linefuncaf 0.3s;
  animation-fill-mode:forwards;
  animation-delay:0.5s;
}
@keyframes linefuncbe{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
@keyframes linefuncaf{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
  .menu{
          display: flex;
          position: fixed;
          height: 100%;
          width: 100%;
          left: 0%;
          top: 0%;
          background-color: rgba(0,0,0,0.5);
          backdrop-filter:blur(10px);
	      -webkit-backdrop-filter:blur(10px);
          flex-direction: column;
          overflow:hidden;
          clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
          transition: all 0.4s ease-out;
          pointer-events: none;
          z-index:4;
          animation: menuactivere 0.4s;
          animation-fill-mode: forwards;
    animation-delay:0.5s;
      }
.menuactive{
      animation: menuactive 0.4s;
      animation-fill-mode: forwards;
      animation-delay:0.1s;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      pointer-events: all;
      z-index:4;
  animation-delay:0.5s;
      
}
@keyframes menuactive{
  0%{
  }
  100%{
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}
@keyframes menuactivere{
  0%{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100%{
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
}
.menucross{
  display:flex;
  position:fixed;
  height:70px;
  width:30px;
  left:90%;
  top:45px;
  background-color:transparent;
  z-index:123;
  flex-direction:column;
  opacity:1;
  cursor:pointer;
}
.menucross::before{
  content:"CLOSE";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  background-color:transparent;
  color:#e4e4e6;
  overflow:visible;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  letter-spacing: 0px;
  line-height: 1;
  word-spacing: 2px;
  font-weight: 700;
  text-decoration: none solid rgb(68, 68, 68);
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  transform:none;
  border-radius:0;
  clip-path:none;
  font-size:20px;
  opacity:1;
  animation:menucrossre 0.5s;
  animation-fill-mode:forwards;
  animation-delay:0s;
}
.menucrossactive::before{
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
  animation-delay:0.5s;
  opacity:0;
}
.menucross::after{
  display:none;
}
.menucross h2{
  color:#e4e4e6;
}
@keyframes menucross{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@keyframes menucrossre{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
.menuitems{
    position:fixed;
    display:flex;
    top:0;
    left:-1%;
    height:100%;
    width:90%;
    background-color:#00000000;
    flex-items:column;
    z-index:4;
    
}
.itemdiv::before{
  content:"+";
  position:absolute;
  display:flex;
  height:100%;
  width:20%;
  left:10%auto;
  top:-20%;
  left:-20%;
  background-color:transparent;
  color:#e4e4e6;
  justify-content:flex-end;
  align-items:center;
  font-size:27px;
}
     .item1{
        position:absolute;
        display:flex;
        background-color:transparent;
        height:10%;
        width:100%;
        left:10%;
        top:25%;
        justify-content:start;
        align-items:center;
        animation: linksupitem1Reverse 0s ease-in-out;
        animation-fill-mode: forwards;
        }
        .item2{
        position:absolute;
        display:flex;
        background-color:transparent;
        height:10%;
        width:100%;
        left: 10%;
        top:40%;
        justify-content:start;
        align-items:center;
        animation: linksupitem2Reverse 0s ease-in-out;
        animation-fill-mode: forwards;
        }
        .item3{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 10%;
          top:55%;
          justify-content:start;
          align-items:center;
          animation: linksupitem3Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
        .item4{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width:100%;
          left: 10%;
          top:70%;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
.item5{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 65%;
          top:25%;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
.item6{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 65%;
          top:40%;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
.item7{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 65%;
          top:55%;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
.item8{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 65%;
          top:70%;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
        .itemdiv a{
			font-family: "Trebuchet MS", Helvetica, sans-serif;
            text-decoration:none;
            transition:1s;
            color: #e4e4e6;
            visibility: visible;  
            font-weight:710;
            font-size: 50px;
            line-height: 2rem;
            letter-spacing:-.01em;
            margin-left:0.5%;
            width:100%;
        }
.itemdiv a::before{
    display:none;
}
.itemdiv a:hover{
    color:#dee765;
}
 a.itemsafter{
          color:#feedbd;
}
.main-img-1{
background-image: url("/imgs/moschee4.webp?v=1");
}
.mainbg{
background-image: url("/imgs/moschee4.webp?v=1");
 }
@media (min-width: 1500px) and (max-width: 2100px) {
.itemdiv a{
  font-size: 60px;
}
.menucross::before{
  font-size:30px;
}
.line::before{
  font-size:30px;
}
.logo{
  transform:scale(1.4);
}
}