/* ============================================
   SALES TEAM SECTION - MODERN STEEL DESIGN
   ============================================ */

.sales-team-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #e8edf2 0%, #f4f6f9 100%);
  position: relative;
  overflow: hidden;
}

.sales-team-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(148, 163, 184, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse at 80% 70%, rgba(100, 116, 139, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.sales-managers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 24px;
  position: relative;
  z-index: 1;
  max-width: 824px;
  margin: 82px auto 0;
  padding: 0 20px;
  justify-content: center;
  align-items: start;
}

/* Place both cards in the same row */
.sales-managers-grid .manager-card:first-child {
  grid-column: 2;
  grid-row: 1;
}

.sales-managers-grid .manager-card:last-child {
  grid-column: 1;
  grid-row: 1;
}

.manager-card {
  position: relative;
  background: linear-gradient(145deg, #f8fafb 0%, #ffffff 100%);
  border-radius: 16px;
  box-shadow: 
    0 1px 3px rgba(71, 85, 105, 0.08),
    0 10px 32px rgba(71, 85, 105, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  width: 100%;
  max-width: 400px;
  justify-self: center;
}

.manager-card.ceo-card {
  background: linear-gradient(145deg, #f8fafb 0%, #ffffff 100%);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 
    0 4px 6px rgba(71, 85, 105, 0.1),
    0 15px 40px rgba(71, 85, 105, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Add max-width for mobile only */
@media (max-width: 768px) {
  .manager-card {
    max-width: 400px;
  }
  
  .manager-card.ceo-card {
    max-width: 480px;
  }
}

.manager-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(203, 213, 225, 0.4) 20%, 
    rgba(148, 163, 184, 0.6) 50%, 
    rgba(203, 213, 225, 0.4) 80%, 
    transparent 100%);
  opacity: 0.6;
}

.manager-content {
    padding: 79px 32px 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    text-align: center;
}

.manager-profile {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.manager-image-wrapper {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 
    0 2px 8px rgba(71, 85, 105, 0.12),
    0 8px 24px rgba(71, 85, 105, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 4px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ceo-card .manager-image-wrapper {
  width: 140px;
  height: 140px;
  border: 4px solid rgba(255, 255, 255, 1);
  box-shadow: 
    0 2px 8px rgba(71, 85, 105, 0.12),
    0 8px 24px rgba(71, 85, 105, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.manager-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.manager-info {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.manager-name {
    font-size: clamp(0.4rem, 1.8vw, 1.25rem);
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px;
    line-height: 1.4;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    width: 100%;
    text-align: center;
}

.manager-title {
    font-size: clamp(0.374rem, 1.4vw, 1rem);
    color: #475569;
    margin: 0;
    line-height: 1.6;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    width: 100%;
    text-align: center;
}

.manager-decoration {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(148, 163, 184, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.4s ease;
}

.manager-card.ceo-card:hover {
  transform: translateY(-5px);
}

.manager-card:hover .manager-image-wrapper {
  box-shadow: 
    0 4px 12px rgba(71, 85, 105, 0.16),
    0 12px 32px rgba(71, 85, 105, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 1);
}

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

.manager-card:hover .manager-decoration {
  transform: scale(1.2);
  opacity: 0.8;
}

/* Language Support */
.manager-name [class^="lang-"],
.manager-title [class^="lang-"] {
  display: none;
}

.manager-name .lang-en,
.manager-title .lang-en {
  display: block;
  font-family: 'Montserrat', sans-serif;
}

.manager-name .lang-ar,
.manager-title .lang-ar {
  font-family: 'Tajawal', Arial, sans-serif;
  font-weight: 700;
}

.manager-name .lang-fa,
.manager-title .lang-fa {
  font-family: 'Vazirmatn', Arial, sans-serif;
  font-weight: 600;
}

body[data-lang="ar"] .manager-name .lang-en,
body[data-lang="ar"] .manager-title .lang-en,
body[data-lang="fa"] .manager-name .lang-en,
body[data-lang="fa"] .manager-title .lang-en {
  display: none;
}

body[data-lang="ar"] .manager-name .lang-ar,
body[data-lang="ar"] .manager-title .lang-ar {
  display: block;
  text-align: center;
}

body[data-lang="fa"] .manager-name .lang-fa,
body[data-lang="fa"] .manager-title .lang-fa {
  display: block;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .sales-team-section {
    padding: 80px 0;
  }
  
  .sales-managers-grid {
    gap: 20px;
    padding: 0 24px;
    margin-top: 60px;
  }

  .manager-content {
    padding: 87px 28px 28px;
  }

  .manager-image-wrapper {
    width: 120px;
    height: 120px;
  }

  .manager-profile {
    top: -60px;
  }
}

@media (max-width: 824px) {
  .sales-team-section {
    padding: 60px 0;
  }

  .sales-managers-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    padding: 0 20px;
    margin-top: 55px;
    max-width: 400px;
  }

  .manager-card:not(.ceo-card) {
    transform: translateY(0);
    margin-top: 80px;
  }

  .manager-card.ceo-card:hover {
    transform: translateY(-5px);
  }
  
  /* Stack cards vertically on mobile - 2 rows */
  .sales-managers-grid .manager-card:first-child,
  .sales-managers-grid .manager-card:last-child {
    grid-column: 1;
    grid-row: auto;
  }
  
  .manager-card {
    max-width: 100%;
  }
  
  .manager-content {
    padding: 82px 24px 24px;
  }

  .manager-image-wrapper {
    width: 110px;
    height: 110px;
    border-width: 3px;
  }

  .ceo-card .manager-image-wrapper {
    width: 110px;
    height: 110px;
    border-width: 3px;
  }
  
  .manager-profile {
    top: -55px;
  }

  .ceo-card .manager-profile {
    top: -55px;
  }

  .manager-name {
    font-size: clamp(0.875rem, 1.6vw, 1.1rem);
  }

  .manager-title {
    font-size: clamp(0.75rem, 1.3vw, 0.9rem);
  }
}

@media (max-width: 480px) {
  .sales-team-section {
    padding: 50px 0;
  }

  .sales-managers-grid {
    padding: 0 16px;
    margin-top: 55px;
  }

  .manager-content {
    padding: 82px 20px 20px;
  }
}