@charset "UTF-8";

/* ==========================================================
   ORANGE CARD GRID — RESPONSIVE PRODUCTION VERSION
   Desktop • Laptop • Tablet • Mobile Slider
========================================================== */

/* --------------------------
   GLOBAL WRAPPER
-------------------------- */

.cs-slider-wrapper{
  max-width:1080px;
  margin:80px auto;	
  padding:0 20px;
  position:relative;
}

/* --------------------------
   HEADER TEXT
-------------------------- */

.cs-header h2{
  font-family:Arimo,sans-serif;
  font-size:34px;
  font-weight:700;
  color:#000;
  text-align:center;
  margin-bottom:5px;
}

.cs-lead{
  font-family:Arimo,sans-serif;
  font-size:22px;
  text-align:center;
  color:#000;
  margin-bottom:00px;
}

/* ==========================================================
   DESKTOP GRID
========================================================== */

.cs-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
	margin-top:90px;
	 scroll-padding-left:0;
	 scroll-behavior:smooth;
	
}

/* ==========================================================
   CARD DESIGN
========================================================== */

.cs-card{
  background:#ff6600;
  border-radius:26px;
  padding:50px 25px 25px;
  position:relative;
  display:flex;
  margin-bottom: 40px;
  flex-direction:column;
  min-height:260px;
  box-sizing:border-box;
  transition:0.25s ease;
}

.cs-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
}

/* --------------------------
   ICON BADGE
-------------------------- */

.cs-icon{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#ff6600;
  position:absolute;
  top:-45px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
}

.cs-icon img{
  width:65px;
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */
/* TITLE */
.cs-title{
  font-family: Arimo, sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #000;
  margin: 0 0 4px 0;      /* very small space below title */
  line-height: 1.2;
}

/* SUBTITLE */
.cs-subtitle{
  font-family: Arimo, sans-serif;
  font-size: 18px;
  font-style: italic;
  color: #000;
  margin: 0 0 12px 0;     /* small space before body */
  line-height: 1.3;
}

/* BODY TEXT */
.cs-body{
  font-family: Arimo, sans-serif;
  font-size: 15px;
  color: #fff;
  line-height: 1.45;
  margin: 0 0 18px 0;
}


/* CTA */

.cs-btn{
  margin-top:auto;
  font-family:Arimo,sans-serif;
  font-size:15px;
  color:#fff;
  text-align:right;
  text-decoration:none;
}

/* ==========================================================
   MAIN CTA
========================================================== */

.cs-slider-cta{
  margin-top:50px;
  text-align:center;
}

.cs-main-btn{
  background:#2bbecf;
  padding:14px 32px;
  border-radius:40px;
  color:#fff;
  font-size:20px;
  font-weight:700;
}

/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width:1200px){

  .cs-grid{
    grid-template-columns:repeat(3,1fr);
  }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:900px){

  .cs-grid{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
  }

  .cs-header h2{
    font-size:30px;
  }

}
/* ==========================================================
   MOBILE SLIDER
========================================================== */

@media (max-width:700px){

  .cs-slider-wrapper{
    overflow:hidden;
    padding:0 50px;   /* controls left/right spacing */
  }

  .cs-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:0;
    padding-top:70px;
    margin:0 15px;
  }

  .cs-card{
    flex:0 0 100%;
    min-width:100%;
    scroll-snap-align:center;
    margin:0;
  }

.cs-slider-wrapper{
  max-width:1080px;
  margin:0px auto;	
  padding:0 20px;
  position:relative;
}

  .cs-grid::-webkit-scrollbar{
    display:none;
  }

}


.cs-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:20px;
}

.cs-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#bbb;
}

.cs-dot.active{
  background:#ff6600;
}