.customers-by-size-desktop * {
    font-family: Figtree;
}
.customers-by-size-mobile{
  display: none;
}

@media only screen and (max-width:767px){
  .customers-by-size-desktop{
    display: none;
  }
  .customers-by-size-mobile{
    display: block
  }
}

.customers-by-size-inner-container {
    display: flex;
    border-radius: 10px;
    overflow: visible;
}

.customers-by-size-inner-container .brand-logos .brand-logo:not(:last-child) {
    border-bottom: 1px solid #929799;
}

.customers-by-size-desktop .widget_info_area {
    color: #454545;
    text-align: center;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 161%;
}

.brand-logos {
    padding: 20px;
    padding-left: 50px; /* Increase left padding to accommodate the pseudo-element */
    flex-basis: 30%;
    border-left: 1px solid #929799;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.brand-logo {
    position: relative;
    cursor: pointer;
    padding: 20px 0;
    transition: all 0.3s ease; /* Add transition for smooth effect */
}

.brand-logo::before {
    content: '';
    display: block;
    width: 8px;
    height: 50px;
    background-color: transparent; /* Start with a transparent rectangle */
    position: absolute;
    left: -55px; /* Adjust this value based on the new padding of .brand-logos */
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, left 0.3s ease; /* Smooth transition for the pseudo-element */
}

.brand-logo.active-brand::before {
    background-color: #000; /* This will now transition smoothly */
}

.brand-logo img {
    height: 40px; /* Fixed height for logos */
    margin-right: 10px;
}

.big-number {
    font-size: 30px;
    color: #333;
    font-weight: bold;
    margin-right: 5px;
}

.brand-text {
    font-size: 16px;
    color: #666;
}

.brand-details-container {
    flex-basis: 70%;
    position: relative; /* For absolute positioning of the button */
}

.brand-details {
    display: none;
    padding-right: 0px;
    height: 100%;
    background-position: center; /* Center the image */
    background-size: contain; /* Scale the image to fit the container */
    background-repeat: no-repeat;
}

.brand-details.active {
    display: block;
}

.brand-cover img {
    width: 100%;
    height: auto;
    display: block; /* Ensures no inline space below image */
    margin-bottom: 20px;
}



.brand-link {
    position: absolute;
    top: 20px;
    right: 20px;
}

.brand-link a {
    display: inline-block;
    padding: 10px 20px;
    color: #FFF;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 190.7%;
    text-decoration-line: underline;
}

.brand-link a:hover {
    //background-color: #0056b3;
}

.brand-quote {
    color: #FFF;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 170.7%;
    padding: 40px;
    position: absolute;
    bottom: 0;
}

.brand-quote p {
    margin-bottom: 0;
    margin-top: 40px;
}


.customers-by-size-mobile-swiper-container {
  width: 100%;
  height: 115vw; /* Adjust based on your needs */
}

.customers-by-size-mobile-swiper-slide {
  text-align: left;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  background-repeat: no-repeat;
    background-size: cover;
}
.customers-by-size-mobile-swiper-container .swiper-wrapper{
  height: 86%;
}

.customers-by-size-mobile-swiper-container .slide-content{
  padding: 0 15vw 10vw 5vw;
}

.customers-by-size-mobile-swiper-container .swiper-pagination-bullet {
  background: #CFCFCF; /* Adjust the color as needed */
  opacity: 1;
  width: 4vw;
  height: 4vw;
}

.customers-by-size-mobile-swiper-container .swiper-pagination-bullets{
  bottom: 1vw;
}

.customers-by-size-mobile-swiper-container .swiper-pagination-bullet-active {
  background: #051235; /* Adjust active bullet color as needed */
}
.customers-by-size-mobile-swiper-container .brand-big-number{
  font-family: Figtree;
  font-size: 10vw;
  font-weight: 700;
  color: white;
  margin-bottom: 1vw;
}
.customers-by-size-mobile-swiper-container .brand-text{
  font-family: Figtree;
  font-size: 5vw;
  font-weight: 700;
  color: white;
}

.customers-by-size-button{
  display: flex;
  margin-top: 10vw;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 15vw;
  border: 1vw solid #051235;
  color: #051235;
  font-family: Figtree;
  font-size: 5vw;
  font-style: normal;
  font-weight: 700;
  line-height: 135.2%;
}

.customers-by-size-button, .customers-by-size-button:link, .customers-by-size-button:visited, .customers-by-size-button:hover, .customers-by-size-button:active {
  display: flex;
  margin-top: 10vw;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 20vw;
  border: 1vw solid #051235;
  color: #051235;
  font-family: Figtree;
  font-size: 5vw;
  font-style: normal;
  font-weight: 700;
  line-height: 135.2%;
  border-radius: 15vw;
}

.customers-by-size-button img{
  margin-left: 3vw;
}

.customers-by-size-mobile .widget_info_area {
    color: #454545;
    text-align: center;
    font-family: Figtree;
    font-size: 5vw;
    font-style: normal;
    font-weight: 500;
    line-height: 161%;
}