body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
}
body{
  height: 100vh;
  background-size: cover;
  transition: 0.6s;
  user-select:none;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: 'Cairo', sans-serif;
}

.navigation{
  margin:10px;
   background: transparent;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1px;
   padding: 10px;
   min-height: 55px;
  backdrop-filter: blur(15px);
   background: transparent;
   color: white;
  border: 0.5px solid rgba(255,255,255,0.236);
   box-shadow: 
        0 1px 1px rgba(0,0,0,0.11), 
        0 2px 2px rgba(0,0,0,0.11), 
        0 4px 4px rgba(0,0,0,0.11), 
        0 8px 8px rgba(0,0,0,0.11), 
        0 16px 16px rgba(0,0,0,0.11), 
        0 32px 32px rgba(0,0,0,0.11) inset;
    transition: all 0.4s ease;
   border-radius:15px;
   text-decoration: none;
}

.hero{
  margin: 5px;
   color: white;
   border: 0.5px solid rgba(255,255,255,0.236);
   box-shadow: 
        0 1px 1px rgba(0,0,0,0.11), 
        0 2px 2px rgba(0,0,0,0.11), 
        0 4px 4px rgba(0,0,0,0.11), 
        0 8px 8px rgba(0,0,0,0.11), 
        0 16px 16px rgba(0,0,0,0.11), 
        0 32px 32px rgba(0,0,0,0.11) inset;
   border-radius: 20px;
   text-align: center;
   padding: 30px 20px 50px 20px;
   margin-top: -1px; 
   opacity: 100%;
   transition: 1s ease;
}

.navigation a{
  margin: 5px;
   color: #fff;
   text-decoration: none;
   border: 0.5px solid rgba(255,255,255,0.236);
   border-radius: 15px;
   padding:10px;
   font-size: 14px;
   font-weight: 500;
   box-shadow: 
        0 1px 1px rgba(0,0,0,0.11), 
        0 2px 2px rgba(0,0,0,0.11), 
        0 4px 4px rgba(0,0,0,0.11), 
        0 8px 8px rgba(0,0,0,0.11), 
        0 16px 16px rgba(0,0,0,0.11), 
        0 32px 32px rgba(0,0,0,0.11) inset;
    transition: all 0.4s ease;
   transition: 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.perant1{
   margin: 0px;
   color: white;
   border: 0.5px solid rgba(255,255,255,0.236);
   box-shadow: 
        0 1px 1px rgba(0,0,0,0.11), 
        0 2px 2px rgba(0,0,0,0.11), 
        0 4px 4px rgba(0,0,0,0.11), 
        0 8px 8px rgba(0,0,0,0.11), 
        0 16px 16px rgba(0,0,0,0.11), 
        0 32px 32px rgba(0,0,0,0.11) inset;
   border-radius: 20px;
   text-align: center;
   padding: 10px;
   margin-top: -1px; 
   opacity: 100%;
   transition: 1s ease; 
}


.perant1:hover{
  background:url(معاينه.jpg);
  background-size:cover;
  background-position:center;
  padding-top:200px;
  padding-bottom: 150px;
}

.perant1:hover h4 {
  opacity:0%;
}

.features {
  text-align: center;
  background:transparent;
  backdrop-filter: blur(15px);
   color: #fff;
   border: none;
   padding:10px;
   margin: 5px;
   border-radius: 30px;
   font-size: 18px;
   font-weight: bold;
   box-shadow: 
        0 1px 1px rgba(0,0,0,0.11), 
        0 2px 2px rgba(0,0,0,0.11), 
        0 4px 4px rgba(0,0,0,0.11), 
        0 8px 8px rgba(0,0,0,0.11), 
        0 16px 16px rgba(0,0,0,0.11), 
        0 32px 32px rgba(0,0,0,0.11) inset;
   transition: all 0.1s ease;
}
.features a{
  text-decoration: none;
  color: #fff;
}