main{
  background-image: url(/portal/clients/resources/assets/images/clientes_background.webp);
  background-size: cover;
  background-position: center;
  width: 100%;
}

.clients-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100vh; 
  padding: 1vh 4vw;
  gap: 2rem;

  .client-content {
    display: none;
    width: 100%;
    min-height: 60vh;
    height: auto;
    gap: 2vh;
    pointer-events: none;
    transition: all 0.5s;
    opacity: 0;
    padding: 0 4vw;

    .client-information {
      width: 38%;
      height: auto;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 2vh;
      text-align: justify;
      gap: 2vh;

      .client_logo {
        width: 18.12rem;
        height: auto;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .title-client,
      .text-client {
        color: white;
        font-size: 1rem;
        font-weight: 500;
      }

      .btn-client-see-more {
        display: none;
        justify-content: center;
        align-items: center;
        width: 117px;
        height: 50px;
        background-color: #fff;
        color: var(--secondary-color);
        font-size: 1rem;
        font-weight: 400;
        border: 2px solid #00B5E5;
        border-radius: 50px;
        text-decoration: none;
        cursor: pointer !important;
        user-select: none;
      }
    }

    .client-images {
      display: flex;
      flex-direction: row;
      justify-content: safe;
      width: 50%;
      height: auto;
      gap: 2vh;
      padding: 1vh;

      img {
        width: auto;
        max-height: 45vh;
        height: auto;
        object-fit: contain;
        border-radius: 5px;
      }

      img:nth-child(1) {
        transform: translateY(4vh);
      }

      img:nth-child(2) {
        transform: translateY(-1.5vh);
      }
    }
  }

  .client-content.active {
    display: flex;
    transition: all 0.5s;
    opacity: 1;
    justify-content: end;
    align-items: end;
    pointer-events: auto;
  }

  #client-Scotiabank-content {
    .client-information {
      .btn-client-see-more {
        display: flex;
      }
    }
  }

  .clients-carousel {
    width: 100%;
    height: 25vh;
    gap: 4vw;
    bottom: 0;

    .clients-carousel-prev {
      transform: rotateY(180deg);
    }

    .clients-carousel-prev,
    .clients-carousel-next {
      width: 44px;
      height: 44px;
      background-color: transparent;
      border: 2px solid #ffff;
      border-radius: 50%;
      cursor: pointer;
    }

    .clients-carousel-prev:hover, 
    .clients-carousel-next:hover{
      background-color: #00B5E5;
      transition: 0.5s;
      border: 0px solid #00B5E5;
    }


    .clients-carousel-items {
      gap: 5%;
      width: 70vmin;
      height: 16vmin;
      flex-shrink: 0;
      overflow-x: clip;
      position: relative;
      scroll-behavior: smooth;
      mask-image: linear-gradient(to right, transparent, black 25%, black 60%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 60%, transparent);
     
      ::before,
      ::after {
        content: "";
        position: absolute;
        top: 0;
        width: 50px;
        height: 100%;
        z-index: 1;
        pointer-events: none;
      }

      .clients-carousel-item {
        position: relative;
        width: 14vmin;
        height: 12vmin;
        display: flex;
        justify-content: center;
        aspect-ratio: 3/2;
        object-fit: contain;
        cursor: pointer;
        border-radius: 15%;
        transition: 0.5s;

        img {
          padding: 1vh;
          object-fit: contain;
          width: 100%;
        }
      }

      .clients-carousel-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #3f95ffe0;
        z-index: 1;
        pointer-events: none;
        border-radius: 15%;
        transition: 0.5s;
      }

      .clients-carousel-item.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffffd3;
        z-index: 1;
        pointer-events: none;
        border-radius: 15%;
        transition: 0.5s;
      }

      .clients-carousel-item.active img {
        z-index: 2;
        transition: transform 0.5s;
      }
    }
  }
}

@media screen and (min-width:1000px) and (min-height: 650px) and (max-height: 735px) {
  .clients-container{
    padding: 10px 30px;
    gap: 20px;

    .client-content {
      min-height: 63vh;
      gap: 0rem;

      .client-information {
        padding: 0px;
        gap: 10px;
      }

      .client-images{
        img{
          width: auto;
          height: 400px;
        }

        img:nth-child(1){
          transform: translateY(3.5vh);
        }

        img:nth-child(2){
          transform: translateY(-1vh);
        }
      }
    }

  }
}

@media screen and (min-width:1000px) and (max-height: 650px) {
  .clients-container{
    padding: 3px 30px;
    gap: 0.4rem;
    height: 100vh;

    .client-content {
      padding-top: 20px;
      min-height: 61vh;
      gap: 0rem;

      .client-information {
        width: 40%;
        padding: 0px;
        gap: 5px;

        .client_logo {
          width: 18rem;
        }


        .title-client,
        .text-client {
          color: white;
          font-size: 0.8rem;
          font-weight: 500;
        }
      }

      .client-images{
        padding-right: 24px;
        img{
          width: auto;
          max-height: 300px;
        }

        img:nth-child(1){
          transform: translateY(3.5vh);
        }

        img:nth-child(2){
          transform: translateY(-1vh);
        }
      }
    }

    .client-content.active {
      display: flex;
      transition: all 0.5s;
      opacity: 1;
      justify-content: end;
      align-items: center;
      pointer-events: auto;
    }

    .clients-carousel {
      width: 100%;
      height: 21vh;
      gap: 4vw;
      bottom: 0;
      margin-bottom: 2px;


    .clients-carousel-items {
      width: 70vmin;
      height: 16vmin;
     
      ::before,
      ::after {
        content: "";
        position: absolute;
        top: 0;
        width: 50px;
        height: 100%;
        z-index: 1;
        pointer-events: none;
      }

      .clients-carousel-item {
        position: relative;
        width: 13vmin;
        height: 11.4vmin;

        img {
          padding: 1vh;
          object-fit: contain;
          width: 100%;
          height: 100%;
        }
      }

    }
  }


  }
}

@media screen and (min-width:1000px) and (max-height: 560px) {
  .clients-container{

    .client-content {
      padding-top: 20px;
      min-height: 59vh;
      gap: 0rem;

      .client-information {
        width: 40%;
        padding: 0px;
        gap: 5px;

        .client_logo {
          width: 18rem;
        }

        .title-client,
        .text-client {
          font-size: 0.8rem;
        }
      }

      .client-images{
        img{
          width: auto;
          max-height: 275px;
        }

        img:nth-child(1){
          transform: translateY(3vh);
        }

        img:nth-child(2){
          transform: translateY(-1vh);
        }
      }
    }

    .clients-carousel {
      height: 17vh;
      margin-bottom: 12px;

    }


  }
}



@media screen and (max-width: 480px) {

  #main-page-clients{
    .title-main{
      width: 75%;
    }

    p{
      width: 75%;
    }
  }


  .clients-container {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0vh 3vw;
    gap: 0;
    justify-content: center;
    align-items: center;

    .client-content {
      width: 100%;
      min-height: 50vh;
      height: auto;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 2vw;
      gap: 0;
      margin-bottom: 0;

      .client-information {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 0 3vw;
        text-align: justify;
        gap: 1.5vh;

        .client_logo {
          width: 12rem;
          height: auto;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .title-client {
          font-size: 0.88rem;
          height: auto;
        }

        .text-client {
          color: white;
          font-size: 0.8rem;
          font-weight: 500;
          height: auto;
        }

        .btn-client-see-more {
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 6vh;
        }
      }

      .client-images {
        display: none;
      }
    }

    .client-content.active {
      display: flex;
      transition: all 0.5s;
    }

    .clients-carousel{
      width: 100%;
      height: 25%;
      gap: 0;

      .clients-carousel-prev{
        transform: rotateY(180deg);
      }

      .clients-carousel-prev,
      .clients-carousel-next{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        cursor: pointer;
      }

      .clients-carousel-items{
        position: relative;
        gap: 12%;
        width: 14rem;
        height: 6.8rem;
        flex-shrink: 0;
        overflow-x: clip;
        scroll-behavior: smooth;

        ::before, ::after {
          content: "";
          position: absolute;
          top: 0;
          width: 50px;
          height: auto;
          z-index: 1;
          pointer-events: none;
        }


        .clients-carousel-item{
          display: flex;
          position: relative;
          width: 6.2rem;
          height: 5rem;
          object-fit: contain;
          border-radius: 15%;
          transition: 0.5s;

          img{
            width: 100%;
          }

        }

        .clients-carousel-item::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #3f95ffe0;
            z-index: 1;
            pointer-events: none;
            border-radius: 15%;
            transition: 0.5s;
        }

        .clients-carousel-item.active::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #ffffffd3;
          z-index: 1;
          pointer-events: none;
          border-radius: 15%;
          transition: 0.5s;
        }

      }
    }
  }
}

@media screen and (max-width: 480px) and (max-height: 680px)  {
  .clients-container{
    height: 87dvh;
    justify-content: start;
    align-items: start;
    padding: 0vh 4vw;
    
    .client-content{
      min-height: 57dvh;
      height: auto;
      justify-content: start;
      align-items: start;
    }

    .clients-carousel{
      height: 20%;
    }
  }
}


@media screen and (min-width: 480px) and (max-width: 1000px) {

  .clients-container{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 20px;
    justify-content: end;
    align-items: end;

    .client-content {
      width: 100%;
      height: 60%;
      flex-direction: column;
      padding: 0px 120px;
      gap: 10px;
      margin-bottom: 0px;

      .client-information {
        display: flex;
        width: 100%;
        padding: 10px;
        gap: 20px;

        .client_logo{
          width: 21rem;

          img{
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .title-client{
          font-size: 1rem;
        }


        .text-client{
          color: white;
          font-size: 1rem;
          font-weight: 500;
        }

        .btn-client-see-more {
          width: 25%;
          justify-content: center;
          align-items: center;
          height: 50px;
        }

      }

      .client-images{
        display: none;
      }
    }

    .client-content.active {
      display: flex;
      transition: all 0.5s;
    }

    .clients-carousel{
      position: relative;
      bottom: auto;
      
      .clients-carousel-items{
        gap: 7%;
      }

    }

  }
}