html, body {
height: auto;
width: auto;
margin:0;
}
body{
    background-image: url("../image/backgorund.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: auto;
    max-height: auto;
    max-width: auto;
}
.slide{
    transform: translateX(-100%);
    animation: slideIn 2s ease forwards;
    text-decoration: none;
    color: black;
}
@keyframes slideIn {
    to{
        transform: translateX(0);
    }
}

nav{
    position:relative;
    display:flex;
    border: 1px solid black;
    border-radius: 20px;
    width: auto;
    height: 85px;
    background: linear-gradient(rgba(200, 245, 245, 0.685),rgba(142, 168, 192, 0.726),rgba(4, 40, 71, 0.726));
    backdrop-filter: blur(5px);
    justify-content: space-evenly;
}
.lo{
    position: relative;
    display: flex;
    text-decoration: none;
    color: black;
    justify-items: center;
}
.lo img{
    height: 100%;
    width: 60%;
}
h3{
    position: relative;
    text-align: center;
    margin: auto;
}
.our_service{
    position: relative;
    display: flex;
    color: aliceblue;
    gap: 5px;
    justify-content: space-around;
    flex-wrap: wrap;
}
.titre{
    position: relative;
    text-align: center;
    color: aliceblue;
}
.service_card{
    position: relative;
    margin: auto;
    width: 300px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    border: 1px solid black ;
    border-radius: 20px;
    background: linear-gradient(rgba(128, 128, 128, 0.418),rgba(255, 255, 255, 0.342));
    height: 750px;
    filter: grayscale(100%);
    
}
.service_card h1{
    font-size: 30px;
    text-align: center;
    padding: 5px;

}
.service_card img{
    max-width: 100%;   /* عرض الصورة بدون تجاوز حدود الكارد */
    max-height: 60%;  /* ارتفاع الصورة داخل الكارد */
    object-fit: cover; /* تغطي الصورة مساحة الكارد بشكل متناسب */
    object-position: center; /* توضع الصورة في منتصف الكارد */
    border-radius: 15px; /
}
.service_card p{
text-align: center;
font-size: 18px;
padding: 5px;
color: black;
}
.service_card a{
    position: relative;
    text-decoration: none;
    color: black;
    background:linear-gradient(rgba(128, 128, 128, 0.418),rgba(255, 255, 255, 0.342));
    padding: 5px;
    border-radius: 20px;
}
.service_card:hover{
    position: relative;
    margin: auto;
    width: 300px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    border: 1px solid black ;
    border-radius: 20px;
    background: linear-gradient(rgba(128, 128, 128, 0.418),rgba(255, 255, 255, 0.342));
    height: 750px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 5);
    backdrop-filter: blur(5px);
}
.fade{
            opacity:0;
            animation: fadeIN 0.6s ease forwards;
            animation-play-state: paused;
        }
        @keyframes fadeIN{
            to{
                opacity: 1;
            }
        }
        .fade1{
            opacity:0;
            animation: fadeIN 0.6s ease forwards;
            animation-play-state: paused;
        }
        .slide1{
        transform: translateX(-100%);
        animation: slideIn 0.6s ease forwards;
        animation-play-state: paused;
        margin-left: -10px ;
        filter: grayscale(0%);
}
@keyframes slideIn {
    to{
        transform: translateX(0);
    }
}
@keyframes slideIn_right {
  from {
    transform: translateX(100px);
    opacity:0;
  }
  to {
    transform: translateX(0);
    opacity:1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.card2 {
  animation: slideUp 0.6s ease-out forwards;
  animation-play-state: paused;
  filter: grayscale(0%);
}
.card3{
            opacity:0;
            animation: fadeIN 0.6s ease forwards;
            animation-play-state: paused;
            filter: grayscale(0%);
}
.card4{
            opacity:0;
            animation: fadeIN 0.6s ease forwards;
            animation-play-state: paused;
            filter: grayscale(0%);
}
.card5{
  animation: slideDown 0.6s ease-out forwards;
  animation-play-state: paused;
  filter: grayscale(0%);
}
.card6{
    opacity: 0;
    animation: slideIn_right 0.6s ease-out forwards;
    animation-play-state: paused;
    filter: grayscale(0%);
}
.list{
  position: absolute;
  display: none;
}