@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

  @import url('https://fonts.googleapis.com/css2?family=Lemonada:wght@600;700&display=swap');

 
  @import url('https://fonts.googleapis.com/css2?family=Mada:wght@800;900&display=swap');

 

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  box-sizing : border-box ;
  margin : 0 ;
  padding : 0 ;
  direction: rtl;
}
a{
  text-decoration: none;
  color: #ffffff;
}
.header{
  margin: 10px;
text-align: center;
font-family: 'Noto+Kufi+Arabic';
font-size: medium ;
background-color:  #beab95;
font-weight: bold;
padding-top: .9rem;
padding-bottom: .9rem;
border-radius: 20px;
padding-left: .3rem;
}
  

.header ul {
  display: flex;
  justify-content: center;
align-items: center;
list-style: none;

}
.header ul li {
  margin-right: 40px;
}
.header ul li a {
  padding: 6px 15px;
  border-radius: 20px;

}                                           
.header ul li a:hover {                                            
 background:  #a0815e;
 color: #ffffff;
 
 }



body {

background: #fefaf6;
font-size: small;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;

}
.container {
    display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background:#fefaf6;
background-image: url(img/bg1.png);
  background-size: cover;

  max-width: 100%;
  padding-top: 2rem;
  padding-bottom: 10rem;
}











img {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card {
  display: flex;
  flex-direction: column;
  width: clamp(20rem, calc(30vh + 1vw), 34rem);
  overflow: hidden;
  font-family: " NotoKufiArabic";
  box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
  border-radius: 1em;
  display: grid;   
  
  margin: 23vh;
  background: #ECE9E6;
background: linear-gradient(to right, #FFFFFF, #ECE9E6);
transition: .2s;
}

.card:hover{
  transform: scale(1.05);
}

.card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
color: #424e69;
}


.tag {
  align-self: flex-start;
  padding: .25em .75em;
  border-radius: 1em;
  font-size: .75rem;
  background: #ffffff;
  background: linear-gradient(to bottom, #FFD194, #D1913C);
  color: #fafafa;

}




.card__body h4 {
  font-size: 1.5rem;
  text-transform: capitalize;
}

.card__footer {
  display: flex;
  padding: 1rem;
  margin-top: auto;
}

.user {
  display: block;
  gap: .5em;
}

.user__image {
  border-radius: 50%;
  width: 20px;
}

.user__info > small {
color: rgb(241, 241, 241);
} 
.footer {
background:   #beab95  ; 
color : #424e69;
font-size: small;
}

.footer *{ 
 display: flex;
min-width: auto;
justify-content: center;
padding-top: .3rem;
padding-bottom: .3rem;
font-size: small;
}


.footer-link {
display :block ;
text-decoration :none ; 
color: #beab95 ;
margin: 2rem;  
}



/* Media Queries for max-width: 1500px */

@media (max-width: 1500px) {
    .card {
        margin: 10vh;
        width: clamp(15rem, calc(10rem + 1vw), 3rem);
       
    }
    .header {
        font-size: medium;
    }
    .container{

      padding-bottom: 10rem;
    }
}
/* Media Queries for max-width: 1200px */

@media (max-width: 1200px) {
  .card {
      margin: 7vh;
      width: clamp(17rem, calc(10rem + 1vw), 3rem);
  }
  .header {
      font-size: medium;
  }
  .container{

    padding-bottom: 10rem;
  }
  .name{


    font-size: 1.6rem;
  }
}
/* Media Queries for max-width: 900px */

@media (max-width: 900px) {
  .card {
      margin: 10vh;
      width: clamp(15rem, calc(10rem + 1vw), 3rem);
  }
  .header {
      font-size: medium;
  }
  .container{

    padding-bottom: 10rem;
  }
  .name{

    font-size: 1.3rem;
  }
}

/* Media Queries for max-width: 600px */

@media (max-width: 650px) {
    .header {
        font-size: small;
    }
    .name{

      font-size: 1rem;
    }
    .card {
      margin: 12vh;
    width: clamp(20em, calc(10rem + 1vw), 3rem);
    height: 35rem;
  }
}

/* Media Queries for max-width: 550px */
@media (max-width: 550px) {
    .name {
        font-size: 0.6rem;
    }
    .card {
      margin: 12vh;
      width: clamp(20em, calc(10rem + 1vw), 3rem);
      height: 35rem;
  }
  .header {
    font-size: xx-small;
}
}

/* Media Queries for max-width: 450px */
@media (max-width: 450px) {
  .card {
    margin: 12vh;
    width: clamp(20em, calc(10rem + 1vw), 3rem);
    height: 35rem;
}
    .name{

font-size: .6rem;

    }
    .header {
      font-size: xx-small;
  }
}
/* Media Queries for max-width: 400px */
@media (max-width: 400px) {
    .name {
        font-size: 0.5rem;
    }
    .header {
      font-size: xx-small;
  }
}

/* Media Queries for max-width: 374px */
@media (max-width: 374px) {
    .name {
        font-size: 0.4rem;
    }
    .name_2 {
        font-size: xx-small;
    }
    .header {
        font-size: xx-small;
    }
}

/* Media Queries for max-width: 300px */
@media (max-width: 300px) {
  .card {
      margin: 10vh;
      width: clamp(10rem, calc(10rem + 1vw), 3rem);
  }
  .name {
      font-size: 0.4rem;
  }
  .name_2 {
      font-size: xx-small;
  }
  .header {
      font-size: 0.8em;
  }
}


.mine{  
padding: 7rem;
font-weight: bold;
background:#fefaf6;
font-size: x-large;
}
 .name{

  padding-top: 4rem;
font-family: 'Lemonada';
  color: #6f7b96;
text-align: center;
 } 
 
 .name_2{
font-size: x-small;
  font-family: 'Mada';
text-align: center;
color:#beab95 ;
padding-top: 2rem;
 }