body{
margin: 0px;
padding: 0px;
top: 0px;
}
    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background-color: #ddd;
    }

    ::-webkit-scrollbar-thumb {
background-color: #988561;
border-radius: 20px;
transition: all 0.5S ease-in-out;
    }

    ::-webkit-scrollbar-thumb:hover {
background-color: #136902;
    }

.container {
  width: 100%;
  margin: 0 auto;   /* خليه بالوسط */
  padding: 0 15px;  /* يترك فراغ مثل Bootstrap */
}

.cont{
gap: 20px;
justify-content: center; /* توسيط أفقياً */
align-items: center; 
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media(max-width: 768px){
.cont{
display: flex;
flex-direction: column;
width: 100%;
}
}
.text-success{
  font-weight: bold;
  margin-bottom: 30px;
  background:  rgba(185, 167, 121, 0.2);
  padding: 20px;
  border-radius: 50px 5px 50px 5px ;
  border-bottom: 3px  #054239  solid ;
  box-shadow: 0px 0px 15px #054239 ;
  text-align: center;
  margin-bottom: 50px;
}
.card{
transition: all 0.5s ease-in-out;
border-radius: 30px;
overflow: hidden;
margin-bottom: 50px;
height: 600px !important;
}
.card:hover{
scale: 1.05;
}
.card-body{
background-color:rgba(213, 173, 73, 0.2);
padding-bottom: 30px !important;
}
.map{
background-color: #054239;
width: 200px;
font-size: 15px;
padding: 15px;
text-align: center;
color: white !important;
border-radius: 40px 5px 40px 5px;
transition: all 0.5s ease-in-out;
text-decoration: none;  
margin: 50px 0px;
margin: 0px;
}
.card-text
{
margin-bottom: 30px;
}
.map:hover{
background-color: rgba(185,167,121,0.6) !important;
color:  #054239 !important;
}
.wrapper {
  width: 100%;        /* أو 100% حسب السياق */
  height: 400px;
  overflow: hidden;    /* يخفي أي جزء من الصورة يطلع برا */
  border: 1px solid #ccc;
}
.wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* أو contain حسب النتيجة اللي تبغاها */
  display: block;      /* يشيل الفراغ اللي يجي أحياناً تحت الصور */
}