/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}


/* ---- Clients gallery logo cards ---- */
.clientsgaller .box-image,
.row.clientsgaller .box-image {
  /* white card look */
  background: #fff;
  border-radius: 15px;
  
  /* center the logo */
  display: flex;
  align-items: center;
  justify-content: center;
  /* control logo area height; adjust as needed */
  height: 200px;              /* desktop */
  padding: 5px;              /* breathing room */
  overflow: hidden;           /* hide overflow if any */
}
.clientsgaller .col-inner{
	
}

.clientsgaller .col-inner .box{
	box-shadow: 0 8px 22px rgba(0,0,0,0.08);
	border-radius: 15px;
	background:#fff;
}

/* Responsive height tweaks */
@media (max-width: 849px) {
  .clientsgaller .box-image,
  .row.clientsgaller .box-image {
    height: 120px;            /* tablet */
  }
}
@media (max-width: 549px) {
  .clientsgaller .box-image,
  .row.clientsgaller .box-image {
    height: 100px;            /* mobile */
  }
}

/* Keep logos crisp, centered, and proportional */
.clientsgaller .box-image img,
.row.clientsgaller .box-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;               /* keeps aspect ratio */
  object-fit: contain;        /* no cropping / no stretch */
  display: block;
  border-radius: 0 !important;/* radius on the card, not the image */
}

/* Optional: tidy up the gallery boxes so every tile is equal height */
.row.clientsgaller .gallery-col .box,
.row.clientsgaller .gallery-col .col-inner {
  height: 100%;
}

/* ---- Clients Gallery Flickity Arrows ---- */
.clientsgaller .flickity-button {
  background: #fff !important;        /* white background */
  border-radius: 50%;                 /* round buttons */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 42px;
  height: 42px;
  transition: all 0.3s ease;
  opacity: 0.85;                      /* slightly transparent by default */
}

.clientsgaller .flickity-button:hover {
  background: #f7f7f7 !important;     /* subtle hover */
  transform: scale(1.1);              /* grow slightly */
  opacity: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.clientsgaller .flickity-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

/* Arrow icons */
.clientsgaller .flickity-button-icon {
  fill: #333;                         /* dark grey arrow */
  width: 100%;
  height: 85%;
}

/* Positioning tweaks */
.clientsgaller .flickity-prev-next-button.previous {
     /* move away from slider edge */
 
  margin-top:-20px;
}
.clientsgaller .flickity-prev-next-button.next {
 
	margin-top:-20px;
}

/* Mobile adjustment: keep arrows closer */
@media (max-width: 767px) {
  .clientsgaller .flickity-prev-next-button.previous {
    
  }
  .clientsgaller .flickity-prev-next-button.next {
   
  }
}