/* 🎨 استایل سکشن اصلی */
.clients-section {
padding: 50px 100px;

}

.margin-tops{
margin-top: 150px !important; 
}

.margin-botoms{
padding-bottom: 80px !important;
}

/* 📌 کانتینر کارت‌ها */
.clients-container {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}

/* 🏆 استایل کارت مشتری */
.client-card {
background: rgba(255, 255, 255, 0.6); /* افکت شیشه‌ای */
backdrop-filter: blur(10px); /* بلور برای حس شیشه‌ای */
border-radius: 15px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
width: calc(20% - 20px);
min-width: 220px;
text-align: center;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.4);
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
}

/* 🔥 افکت هاور برای کارت */
.client-card:hover {
transform: translateY(-5px);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.8);
}

/* 🌟 لوگوی مشتری */
.profile_img {
width: 120px; /* اندازه بزرگتر */
height: 120px; /* اندازه بزرگتر */
border-radius: 50%;
object-fit: contain;
background: white;
padding: 15px;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.15); /* سایه برجسته */
margin-bottom: 15px;
transition: transform 0.3s ease-in-out;
}

/* 📡 افکت هاور برای لوگو */
.client-card:hover .profile_img {
transform: scale(1.1);
}

/* 🔗 نام مشتری + آیکن اینستا */
.client-card h3 {
margin: 10px 0;
font-size: 18px;
font-weight: bold;
color: #333;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

/* 🔹 استایل لینک نام */
.client-card h3 a {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.3s ease-in-out;
}

/* 💎 افکت هاور لینک */
.client-card h3 a:hover {
color: #E1306C; /* رنگ اینستاگرام */
}

/* 📷 آیکن اینستاگرام */
.insta-icon {
height: 22px;
transition: transform 0.3s ease-in-out;
}

.client-card h3 a:hover .insta-icon {
transform: scale(1.2);
}

/* 📊 آیکن‌های اطلاعات */
.icons {
height: 22px;
margin-left: 8px;
}

/* 📜 توضیحات */
.client-card p {
font-size: 14px;
color: #555;
margin: 5px 0;
}

/* 📱 تنظیمات ریسپانسیو */
@media (max-width: 1200px) {
.client-card {
    width: calc(25% - 20px); /* ۴ کارت در یک ردیف */
}
}

@media (max-width: 992px) {
.client-card {
    width: calc(33.33% - 20px); /* ۳ کارت در یک ردیف */
}
}

@media (max-width: 768px) {
.client-card {
    width: calc(50% - 20px); /* ۲ کارت در یک ردیف */
}
}

@media (max-width: 480px) {
.client-card {
    width: 100%; /* ۱ کارت در هر ردیف */
}

.clients-section{
    padding: 50px 50px;

}
}


.containerss {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;

}

.cards {
background: #fff;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center;
}

.back-white{

margin-top: -200px;
}

.image-containers {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}

.image-containers img {
width: 100%;
height: auto;
position: cover;
top: 0;
transition: transform 2s ease-in-out;
}

.image-containers:hover img {
transform: translateY(-50%);
}

.info {
margin-top: 10px;
}

.info a {
text-decoration: none;
color: #fc4273;
font-weight: bold;
}

.info p {
margin-bottom: -2px;
font-family: pinarextrabold;
}

/* تنظیمات رسپانسیو */

/* برای تبلت: ۲ کارت در هر ردیف */
@media (max-width: 1024px) {
.containerss {
    grid-template-columns: repeat(2, 1fr);
}
}

/* برای موبایل: ۱ کارت در هر ردیف */
@media (max-width: 768px) {
.containerss {
    grid-template-columns: repeat(1, 1fr);
}


}