.slider-wrapper { width:100%; overflow:hidden;  padding:0px 0; }
.slider { width:100%;     padding-left: 0;}
.card-content {
  display:flex;
  gap:20px;
  overflow-x:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding-bottom:20px;
}
.cs-slider-button {
    text-align: center;
    width: max-content;
    margin: auto;
    background: #2f277b;
    border-radius: 20px;
    padding: 10px;
    margin-top: 2rem;
    border: 1px solid #ffffff54;
}
.cs-slider-button button.slider-prev {
    padding: 10px;
    font-size: 40px;
    background: none;
    border: none;
	color: #FEC400;
}
.cs-slider-button button.slider-next {
    padding: 10px;
    font-size: 40px;
    background: none;
    border: none;
	color: #FEC400;
}

.card-content::-webkit-scrollbar { height:0; }

.card {
  flex:0 0 calc((100% - 60px)/3.5 + 30px/2); /* desktop default: 3 full + half */
  min-width: calc((100% - 60px)/3.5 + 30px/2);
  height:auto;
  background:#fff;
 
  position:relative;
  cursor:pointer;
  scroll-snap-align:start;
  box-shadow:0 0 0 rgba(0,0,0,0.08);
   transition: transform 0.4s ease, background 0.4s ease;
  transform-origin: center;   background-image: url(/wp-content/uploads/2025/10/image-61.png);
    background-position: inherit;
    background-repeat: no-repeat;    background-color: #120e36cc;
}

.home-solutions .card {
      background-color: #fff;
    border-radius: 30px;
    
}
.home-solutions .card:hover {
    background-color: #2f277b;
}
.card-cntn {
    padding: 25px 40px;
}
.home-solutions .card:hover {
   transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
   background: #2f277b;
   z-index: 2;
   background-image: url(/wp-content/uploads/2025/10/hover-bg.png);
 background-repeat: no-repeat;
 background-size: auto;
}


/*.card:hover h4, .card:hover h3, .card:hover p{*/
/*    color:#fff;*/
/*}*/




/*.card:hover img{*/
/*    filter: brightness(0) invert(1);*/
/*}*/
.card h4 {
   
    font-size: 70px;
    font-weight: bold;
    color: #fff;
    line-height: 110%;
    letter-spacing: -2px;
}
.card-text h3 {
      color: #fff;
    font-size: 26px !important;
    line-height: 120% !important;
    margin-bottom: 0;
    padding-top: 20px;    text-align: left !important; margin-bottom:20px;
}
.home-solutions .card h4, .home-solutions .card-text h3, .home-solutions .card-text p {
      color: #000;
}
  .home-solutions .card-text img {
          filter: brightness(0);
  }
.home-solutions .card:hover .card-text img {
    filter: brightness(1);
}
.home-solutions .card:hover h4, .home-solutions .card:hover .card-text h3, .home-solutions .card:hover .card-text p {
      color: #fff;
}

.card-text p {
     line-height: 170% !important;  color: #fff;
}
.card i { position:absolute; right:15px; top:15px; font-size:1.4rem; }
/* .card .card-text { padding:50px 0 10px 0; } */
.card .card-img { margin:0 20px; display:flex; justify-content:center; align-items:center; }
.card-text img {
    height: auto;
    width: auto;
}

.dots { text-align:center; margin-top:20px; }
.dot { display:inline-block; width:12px; height:12px; background:#ccc; border-radius:50%; margin:0 5px; cursor:pointer; transition: all .3s ease; }
.dot.active { background:#01bdfd; }

/* Tablet: 2 full + 1 half */
@media(max-width:1024px){
    .card h4 {
    font-size: 50px;
    }
    .card .card-text {
    padding: 30px 0 0 0;
}
    .card-cntn {
    padding: 30px;
}
    .slider {           padding-left: 1rem;
		padding-right: 1rem;}
  .card { flex:0 0 calc((100% - 40px)/2.5 + 20px/2); min-width: calc((100% - 40px)/2.5 + 20px/2); }
}

/* Mobile: 1 full + 1 half */
@media(max-width:768px){
      .card {
        flex: 0 0 calc((100% - 40px) / 1.2 + 20px / 1);
        min-width: calc((100% - 40px) / 1.2 + 20px / 1);
    }
    .card-cntn {
    padding: 20px;
}
 .card h4 {
    font-size: 40px;
 }
.card-text h3 {
    font-size: 22px !important;
}
.card-text p {
    line-height: 150% !important;
}
.card .card-text {
    padding: 30px 0 0 0;
}
    
}


/* Approx. 1920x1080 @ 150% scaling (1280px effective width) */
@media only screen and (max-width: 1280px) and (min-resolution: 1.5dppx),
       only screen and (max-width: 1280px) and (min-device-pixel-ratio: 1.5) {
           
  /* Your CSS here */
.card h4 {
    font-size: 42px;
}
.card-cntn {
    padding: 20px;
}
.card .card-text {
    padding: 28px 0;
}  
 .card-text h3 {
    font-size: 20px !important;
  padding-top: 20px !important;
    margin-bottom: 10px;
    padding-left: 0px !important;
} 
.slider-wrapper {
    padding: 20px 0;
} 
 
 
  
}