@font-face {
   font-family: 'KalamehWeb-Bold';
   src: url('KalamehWeb-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }

 * {
   touch-action: manipulation;
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Old versions of Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
   /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
 }
@keyframes changeBackgroundColor {
      0% { background-color: #0090DF; }
      20% { background-color: #005FAB; }
      40% { background-color: #DB0060; }
      60% { background-color: #DD1A1E; }
      80% { background-color: #FFE800; }
      100% { background-color: #0090DF; }
    }
 
 /*body {*/
 /*  animation: changeBackgroundColor 20s linear infinite;*/
 /*  font-family: 'KalamehWeb-Bold' !important;*/
 /*  direction: rtl;*/
 
 /*  display: flex;*/
 /*  align-items: center;*/
 /*  vertical-align: middle;*/
 /*  justify-content: center;*/
 /*}*/






















body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #081945;
 font-family: 'KalamehWeb-Bold';
 direction:rtl;

}

body::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #005FAB;
  clip-path: circle(50% at right 70%);
    animation: moveCircles 5s linear infinite, bounce 2s ease-in-out infinite;

  
}

body::after{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #DB0060;
  clip-path: circle(50% at 10% 10%);
    animation: moveCircles 5s linear infinite, bounce 2s ease-in-out infinite;


}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.header{
 display:flex;
 flex-direction:column;
 justify-content:center;
 vertical-align:middle;
 align-items:center;
}
.header img{
    width:70px;
}
.container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100% !important;
    flex-wrap: wrap;
    z-index: 1;
    width: 100%;
    padding-top:50px;
}

.container .card{
  position: relative;
  width: 280px;
  height: 400px;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.5);
  border-left: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
}

.container .card .content{
  padding: 20px;
  text-align: center;
  transform: translateY(25px);
  transition: .7s;
}

.container .card:hover .content{
  transform: translateY(0px);
}

.container .card .content h2{
  position: absolute;
  top: -80px;
  right: 20px;
  font-size: 8em;
  color: rgba(255,255,255,0.05);
  pointer-events: none;
}

.container .card .content h3{
  font-size: 1.8em;
  color: #fff;
  z-index: 1;
}

.container .card .content p{
  font-size: 1em;
  color: #fff;
  font-weight: 300;
}

.container .card .content a{
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  margin-top: 15px;
  background: #fff;
  color: #000;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}











 
 .main-container {
   width: 100%;
    display: flex;
   flex-wrap: wrap;
 }
 @media (max-width: 800px) {
 .main-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding-bottom: 200px;
  }
     
 }
 .glow-image {
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.5); /* Adjust values as needed */
}

 .card {
   display: flex;
   flex-direction: column;
   background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.6), rgba(233, 233, 233, 0.1));
   backdrop-filter: blur(12px);
   border-radius: 40px;
   border-top: 1px solid rgba(255, 255, 255, 0.6);
   border-left: 1px solid rgba(255, 255, 255, 0.6);
   box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
   margin: 35px;
   justify-content: center;
   align-items: center;
   height: 400px;
   padding:10px;
   padding-top:30px;
   padding-bottom:30px;
   width: 80%;
   flex: 1;

   
  transition: transform 0.5s; /* Add a smooth transition effect */
}

  

  
 



.ios::before {
  content: '';
  background-image: url('ios-bg.png') !important;
  background-repeat:no-repeat;
  background-position:right center;
  background-size: contain;
  opacity: 0.3; /* Adjust the opacity as needed (0.0 to 1.0) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place it behind the content */
}





.wifi::before {
  content: '';
  background-image: url('wifi-bg.png') !important;
  background-repeat:no-repeat;
  background-position:right center;
  background-size: contain;
  opacity: 0.3; /* Adjust the opacity as needed (0.0 to 1.0) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place it behind the content */
}







.android::before {
  content: '';
  background-image: url('apk-bg.png') !important;
  background-size: contain;
    background-repeat:no-repeat;

  opacity: 0.3; /* Adjust the opacity as needed (0.0 to 1.0) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place it behind the content */
}



 
.card:hover {
  transform: scale(1.05); /* Scale up the card by 10% on hover */
}


 button {
   width: 100%;
   border-radius: 10px;
   background-color: rgba(17, 61, 208, 0.536);
   padding: 10px;
   color: white;
   border-style: none;
   font-family: 'KalamehWeb-Bold';

 }

 .main {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
   max-width: 1000px;
 }

 .text-container {
   flex-direction: column;
 }

 .footer {
   bottom: 0;
   position: fixed;
   color: white;
   width: 100%;
   text-align: center;
   font-size: 14px;
   letter-spacing: 0px;
   background-color: rgba(0, 0, 0, 0.246);
   font-weight: 100;
 }
 a{
     color:white;
     text-decoration:none;
     text-align:center;
 }

 .qr {
   display: flex;
   justify-content: center;
   vertical-align: middle;
   align-items: center;
 }

 .qr img {
   max-width: 300px;
   padding: 10px;
 }
 
 
 h1,h2,h3,h4,h5,h6{
     margin:0px;
     color:white !important;
 }
 
 
 
 .btn {
   width: 100% !important;
    text-align: center;
    background-color: rgba(17, 61, 208, 0.536);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}