/* Updated CSS for Deploying AI Agents carousel — Full-width container with left/right blur fade effect */

/* ===== SECTION / HEADER ===== */
/* .deploy-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 70px 16px 30px;
  overflow-y:hidden;
} */
body{
 overflow-x:hidden;

}

.deploy-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 70px 16px 30px;
  position: relative;
  overflow-x: hidden;  /* 👈 hides horizontal overflow */
}


/* ---------- HEADER ---------- */
.deploy-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
/*   flex-wrap: wrap; */
  margin-top:20px;
  gap: 20px;
}

.deploy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 27px;
/*   font-weight: 600; */
  font-size: 13px;
  background-color: #fff;
  color: #171717;
  border: 1px solid #3384FF;
  box-shadow: 2px 4px 4px 0 rgba(0,0,0,0.25);
}
.deploy-badge img { width: 20px; height: 20px; }

.deploy-header h2 {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
  font-weight: 700;
  color:#3C3C3C;
}
.deploy-header h2 span {
  display: block;
  background: linear-gradient(90deg, #3384FF, #1E40AF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.deploy-header-right { text-align: center; }
.deploy-header-right p { color: #505050; margin-bottom: 16px; line-height: 1.5; font-size: 20px; font-weight: 500; }
.deploy-controls { display: flex; gap: 10px; justify-content: flex-end; }

.deploy-arrow {
  width: 40px; height: 40px; border-radius: 50%; background: #fff;
  border: 1px solid #3384FF; box-shadow: 0 4px 14px rgba(2,6,23,0.1);
  cursor: pointer; font-size: 20px; transition: all 0.3s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.deploy-arrow:hover { background: #2563eb; }
.deploy-arrow svg { transition: stroke 0.3s ease; }
.deploy-arrow:hover svg { stroke: #fff; }

/* ---------- CAROUSEL ---------- */
.deploy-carousel-container {
  width: 100vw; /* full width */
  position: relative;
  overflow: hidden;
  margin: 40px 0 0;
}

.deploy-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
   padding-top: 20px;
  box-sizing: border-box;
  width: max-content;
  will-change: transform;
}

.deploy-carousel-track::-webkit-scrollbar { display: none; }

/* === FADE BLUR EFFECT ON SIDES === */
.deploy-carousel-container::before,
.deploy-carousel-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px; /* blur width */
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.deploy-carousel-container::before{
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.deploy-carousel-container::after{
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* CARD base */
.deploy-card {
  flex: 0 0 400px;
  width: 400px;
  scroll-snap-align: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 3px -4px 7.3px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  position: relative;
  transition: transform 0.25s ease;
  padding: 15px 20px;
  box-sizing: border-box;
  padding-bottom:0px;
}
.deploy-card:hover { transform: translateY(-6px); }

.deploy-card-content { padding: 8px 8px 0; }
.deploy-title-row { display: flex; gap: 10px; align-items: center; }
.deploy-icon { width: 50px; height: 50px; flex: 0 0 50px; }
.deploy-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.deploy-card h3 { font-size: 18px; font-weight: 700; color: #555555; margin: 0; }
.deploy-card p { margin-top: 10px; color: #475569; line-height: 1.5; font-size: 15px; }

/* card image */
.deploy-card-image {
  width: 100%; height: 160px; overflow: hidden; position: relative; object-fit:fit;
  box-shadow: 0 10px 30px rgba(8,18,32,0.15);
  border-top-left-radius: 25px; border-top-right-radius: 25px;
  z-index: 1; margin-top: 12px;
}
.deploy-card-image img { width: 100%; height: 100%; object-fit: fit; display: block; }

.deploy-blur { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; filter: blur(30px); }
.small { margin-top: 0px; }
.deploy-blur.deploy-blue { background: rgba(255,246,221,1); }
.deploy-blur.deploy-green { background: rgba(255,240,244,1); }
.deploy-blur.deploy-yellow { background: linear-gradient(#F2FBFD,#F3FCFE);}
.deploy-blur.deploy-orange { background: linear-gradient(#D2FFFA,#D2FFFA);}
.deploy-blur.deploy-purple { background: linear-gradient(#E0E9FF,#E0E9FF); }

/* Responsive adjustments */
@media (max-width: 1100px) {
  .deploy-card { flex: 0 0 300px; width: 300px; min-height: 300px; }
  .deploy-card-image { height: 150px; }
}

@media (max-width: 900px) {
/*   .deploy-card { flex: 0 0 72%; width: 72%; min-height: 300px; padding: 14px; border-radius: 18px; } */
  .deploy-card-image { height: 180px; border-radius: 12px; }
  .deploy-header-right { text-align: left; }
  .deploy-carousel-container::before, .deploy-carousel-container::after { width: 60px; }
}

@media (max-width: 600px) {
/*   .deploy-card { flex: 0 0 86%; width: 86%; min-height: auto; padding: 12px; border-radius: 16px; } */
/*     .deploy-card { flex: 0 0 40%; width: 40%; min-height: auto; padding: 12px; border-radius: 16px; } */
  .deploy-card-image { height: 140px; }
  .deploy-header { gap: 12px; align-items: center; }
  .deploy-header-right p { font-size: 16px; }
  .deploy-carousel-container::before, .deploy-carousel-container::after { width: 40px; }
}

@media (max-width: 420px) {
  .deploy-carousel-track { gap: 12px; padding: 12px; }
/*   .deploy-card { width: 88%; flex: 0 0 88%; } */
/*    .deploy-card { width: 40%; flex: 0 0 40%; } */
  .deploy-carousel-container::before, .deploy-carousel-container::after { width: 30px; }
}

.deploy-card, .deploy-card p, .deploy-card h3 { word-break: break-word; }

/* ===== Card color gradients ===== */
.deploy-card:nth-child(1) { background: linear-gradient(#FFF9F8,#FFFDF7); }
.deploy-card:nth-child(1) .deploy-card-image { box-shadow: 0 -3px 12px rgba(255,200,55,0.8); }
.deploy-card:nth-child(2) { background: linear-gradient(#FAFBFF,#FFF7FB); }
.deploy-card:nth-child(2) .deploy-card-image { box-shadow: 0 -3px 12px rgba(228,183,205,0.8); }
.deploy-card:nth-child(3) { background: linear-gradient(#FFFDED,#F2FBFF); }
.deploy-card:nth-child(3) .deploy-card-image { box-shadow: 0 -3px 12px rgba(144,221,255,0.8); }
.deploy-card:nth-child(4) { background: linear-gradient(#E9FDFF,#E9FDFF); }
.deploy-card:nth-child(4) .deploy-card-image { box-shadow: 0 -3px 12px rgba(148,255,205,0.8); }
.deploy-card:nth-child(5) { background: linear-gradient(#FAFBFF,#E0E9FF); }
.deploy-card:nth-child(5) .deploy-card-image { box-shadow: 0 -3px 12px #CFB7FF; }
.deploy-card:nth-child(6) { background: linear-gradient(#FFF9F8,#FFFDF7); }
.deploy-card:nth-child(6) .deploy-card-image { box-shadow: 0 -3px 12px rgba(255,200,55,0.8); }
.deploy-card:nth-child(7) { background: linear-gradient(#FAFBFF,#FFF7FB); }
.deploy-card:nth-child(7) .deploy-card-image { box-shadow: 0 -3px 12px rgba(228,183,205,0.8); }
.deploy-card:nth-child(8) { background: linear-gradient(#FFFDED,#F2FBFF); }
.deploy-card:nth-child(8) .deploy-card-image { box-shadow: 0 -3px 12px rgba(144,221,255,0.8); }
.deploy-card:nth-child(9) { background: linear-gradient(#E9FDFF,#E9FDFF); }
.deploy-card:nth-child(9) .deploy-card-image { box-shadow: 0 -3px 12px rgba(148,255,205,0.8); }
.deploy-card:nth-child(10) { background: linear-gradient(#FAFBFF,#E0E9FF); }
.deploy-card:nth-child(10) .deploy-card-image { box-shadow: 0 -3px 12px #CFB7FF; }


/* .deploy-blur.deploy-blue { background: rgba(255,246,221,1); }
.deploy-blur.deploy-green { background: rgba(255,240,244,1); }
.deploy-blur.deploy-yellow { background: #d2fffa }
/* rgba(255, 246, 221, 1) */
/* .deploy-blur.deploy-orange { background: #fff6dd } */