﻿canvas {
    display: none !important;
}

.MobileApps {
    display: flex;
    flex-wrap: wrap;
    gap:50px;
}
.App h3{
    line-height: 30px;
    min-height: 75px;
    margin-bottom: 8px;
}
.AppContainer {
    flex: calc(50% - 50px);
    position: relative;
}

.squareIcon{
    padding: 4px ;
}
.squareIcon img {
   width: 48px;
   height: 48px;
}


.Description p{
    min-height: 115px;
}

.Download {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
}


.Stores {
    display: flex;
    gap: 12px;
}

.app-qrcode{
    padding: 8px;
    border-radius: 4px;
    border:1px solid #D2D6DB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
        position: relative;

}

.app-qrcode img {
    width: 120px;
    height: 120px;
}
.skeleton-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
}
.App.mainCard.skeleton {
    max-width: calc(50% - 50px);
    min-width: calc(50% - 50px);
}
.App.mainCard.skeleton .Title{
    width: 100%;
   
}
.skeleton-box {
  background: linear-gradient(100deg, #e0e0e0 40%, #f0f0f0 50%, #e0e0e0 60%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 6px;
   margin-top: 20px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* أحجام العناصر */


.Description.skeleton-text {
  width: 100%;
  height: 15px;
  margin-top: 15px;
}

.Links {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin-top: 20px;
}

.skeleton-link {
  display: inline-block;
  width: 70px;
  height: 14px;
}


@media (max-width:1399px){
    .AppContainer:first-of-type .Stores {
        flex-direction: column;
    }
}

@media only screen and (max-width:991px) {
    .AppContainer {
        flex: 100%;
    }
     .AppContainer:first-of-type .Stores {
        flex-direction: row;
    }
    .App.mainCard.skeleton{
        min-width: 100%;
    }
}
@media only screen and (max-width:767px) {
    .AppContainer:first-of-type .Stores {
        flex-direction: column;
    }
}
@media only screen and (max-width:499px) {
     .AppContainer:first-of-type .Stores {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .AppContainer:first-of-type .Stores a{
        margin-left: unset;
    }
    .Stores {
        align-items: center;
    }
    .app-qrcode {
        display: none;
    }
}
