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


.successful_case-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  padding: 30px 30px;
  gap: 30px;

  .successful_case-content {
    display: none;
    width: 100%;
    min-height: 75%;
    height: auto;
    gap: 0px;
    pointer-events: none;
    transition: all 0.5s;
    opacity: 0;

    .successful_case-images{
      display: flex;
      flex-direction: row;
      width: 51%;
      height: auto;
      gap: 20px;
      padding: 5px;
      justify-content: end;
  
      img{
        width: auto;
        max-height: 359px;
        height: auto;
        object-fit: contain;
        border-radius: 5px;
      }

      img:nth-child(1){
        transform: translateY(-1.5vh);
      }
      
      img:nth-child(2){
        transform: translateY(4vh);
      }
    }
    
    .successful_case-information {
      width: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 30px 20px;
      text-align: justify;
      gap: 10px;

      .successful_case{
        width: 21rem;
        height: 6.37rem;

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

      .title-successful_case{
        color: white;
        font-size: 2.25rem;
        font-weight: bold;
        margin-bottom: 0px;
      }

      .subtitle-successful_case{
        margin-bottom: 30px;
      }

      .text-successful_case{
        color: white;
        font-size: 1rem;
        font-weight: 500;
        padding: 0% 15%;
      }

      .button_see_more_successful_case {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 10px 20px;
        width: 117px;
        height: 50px;
        background-color: white;
        color: var(--secondary-color);
        font-size: 1rem;
        font-weight: 400;
        border: 2px solid #00B5E5;
        border-radius: 50px;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
  
  .successful_case-content.active {
    display: flex;
    transition: all 0.5s;
    opacity: 1;
    align-items: center;
    pointer-events: auto;
  }

  .successful_case-carousel{
    width: 100%;
    height: 25%;
    gap: 4%;
    bottom: 0;

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

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

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

    .successful_case-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;
      }
      

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

        .successful_case-carousel-item-information{
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          border-radius: 15%;
          background-color: 	rgb(63, 150, 255, 0.9);
          z-index: 3;
          text-align: center;
          gap: 5px;

          .carousel-item-information-title{
            color: white;
            font-size: 0.9rem;
            font-weight: bold;
            padding: 0px 15px;
          }

          .carousel-item-information-subtitle{
            color: white;
            font-size: 0.6rem;
            font-weight: 500;
          }
        }

        img{
          position: absolute;
          object-fit: contain;
          height: 100%;
          width: 100%;
          z-index: 1;
        }
      }

      .successful_case-carousel-item.active{

        .successful_case-carousel-item-information{
          background-color: 	rgba(55, 118, 225, 0.9); 
        }
      }

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

    }  
  }
}

.overview-container {
  width: 100%;
  height: 100%;
  padding: 30px 30px;
  justify-content: center;

  .overview-images{
    display: flex;
    gap: 30px;
    width: 50%;
    height: 100%;
    padding: 5px;
    justify-content: center;

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

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

  .overview-information{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 35%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: justify;

    .overview-information-title{
      color: white;
      font-size: 1.5rem;
      font-weight: 500;
    }

    .overview-information-subtitle-successful-case{
      color: white;
      font-size: 2rem;
      font-weight: bold;
    }

    .overview-information-subtitle{
      height: auto;
      width: 80%;
      color: white;
      font-size: 1rem;
      font-weight: 500;
      padding: 30px 20px;
    }

  }
}

.tecnologies-container {
  display: flex;
  position: relative;
  width: 70vw;
  height: 81vh;
  
    .tecnology-container  {
      position: absolute;
      display: none;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;

      .center-circle {
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        h2 {
          margin: 0;
          font-size: 25px;
          text-align: center;
        }
        
        p {
          margin: 5px 0 0;
          font-size: 16px;
          opacity: 0.8;
          text-align: center;
        }
      }

      .segments-tecnology-container{
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        .segment{
          position: relative;
          display: flex;
          opacity: 0.3;

          .metric {
            position: absolute;
            display: flex;
            flex-wrap: wrap;
            max-width: 16rem !important;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            width: auto;
            opacity: 1 !important;
        
            .metric-value {
              font-size: 6rem;
              font-weight: bold;
            }
            
            .metric-label {
              width: 100%;
              font-size: 1.8rem;
              margin: 0;
              
            }
          }
          .metric.active {
            opacity: 1 !important;
          }
        }
    
        .segment1,
        .segment2,
        .segment3,
        .segment4 {
          
          background-size: 52%;
          
          .metric1-corporate-banking{
            left: 0.7rem;
          }

          .metric2-corporate-banking{
            right: 5rem;
          }

           .metric3-corporate-banking{
            left: 3rem;
          }

          .metric4-corporate-banking{
            right: 2.5rem;
          }
        }

    
        .segment1_app-mobile_retail,
        .segment2_app-mobile_retail,
        .segment5_app-mobile_retail,
        .segment6_app-mobile_retail{
          background-size: 48%;
        }
  
        .segment3_app-mobile_retail,
        .segment4_app-mobile_retail{
          background-size: 25.7%;
        }

        .segment1 {
          width: 50%;
          height: 50%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 100% 100%;
          align-items: start;
          justify-content: start;

          .metric-1 {
            top: 50px;
            height: auto;
            .metric-value{
              color: #00B5E5;
            }
          }
    
          &:hover {
            transform: translate(-10px, -10px);
            opacity: 1;
  
            .metric-1{
              opacity: 1 !important; 
            }
  
          }
        }
        
        .segment2 {
          width: calc(100% / 2);
          height: 50%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 0% 100%;
          align-items: start;
          justify-content: end;
  
          .metric-2 {
            position: absolute;
            top: 50px;
            height: auto;
            .metric-value{
              color: #6082FF;
            }
          }
    
          &:hover {
            transform: translate(10px, -10px);
            opacity: 1;
            .metric-2{
              opacity: 1 !important; 
            }
          }
        }
        
        .segment3 {
          width: calc(100% / 2);
          height: 50%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 100% 0%;
          align-items: center;
          justify-content: self-end;
          
  
          .metric-3 {
            height: auto;

            .metric-value{
              color: #FFE992;
            }
          }
    
          &:hover {
            transform: translate(-10px, 10px);
            opacity: 1;
  
            .metric-3{
              opacity: 1 !important; 
            }
          }
        }
        
        .segment4 {
          width: calc(100% / 2);
          height: 50%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 0% 0%;
          align-items: center;
          justify-content: end;
  
          .metric-4 {
    
            .metric-value{
              color: #00DDC1;
            }
          }
    
          &:hover {
            transform: translate(10px, 10px);
            opacity: 1;
  
            .metric-4{
              opacity: 1 !important; 
            }
          }
        }
  
        .segment1_app-mobile_retail {
          width: 50%;
          height: 37%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 100% 100%;
          align-items: start;
          justify-content: start;
  
          .metric-1 {
            position: absolute;
            top: 45px;
            left: 2rem;
            height: auto;
            .metric-value{
              color: #CE93FF;
            }
          }
    
          &:hover {
            transform: translate(-10px, -10px);
            opacity: 1;     
  
            .metric-1{
              opacity: 1 !important; 
            }   
          }
        }
        
        .segment2_app-mobile_retail {
          width: 50%;
          height: 37%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 0% 100%;
  
          .metric-2 {
            top: 45px;
            right: 2rem;
    
            .metric-value{
              color: #6180FA;
            }
          }
    
          &:hover {
            transform: translate(10px, -10px);
            opacity: 1 ;
  
            .metric-2{
              opacity: 1 !important; 
            }
          }
        }
        
        .segment3_app-mobile_retail {
          width: 50%;
          height: 24.3%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 66.4% 50%;
  
          .metric-3 {
            bottom: 10%;
            /* left: -5rem; */
    
            .metric-value{
              color: #C4FCFF;
            }
          }
    
          &:hover {
            transform: translate(-20px, 0px);
            opacity: 1;
  
            .metric-3{
              opacity: 1 !important; 
            }
          }
        }
        
        .segment4_app-mobile_retail {
          width: 50%;
          height: 24.3%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 33.9% 50%;
  
          .metric-4 {
            bottom: 10%;
            right: 0rem;
    
            .metric-value{
              color: #53DAC2;
            }
          }
    
          &:hover {
            transform: translate(20px, 0px);
            opacity: 1;
  
            .metric-4{
              opacity: 1 !important; 
            }
          }
        }
    
        .segment5_app-mobile_retail {
          width: 50%;
          height: 37%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 100% 0%;
  
          .metric-5 {
            top: 40px;
            left: 2rem;
            .metric-value{
              color: #3FB2E2;
            }
          }
    
          &:hover {
            transform: translate(-10px, 10px);
            opacity: 1;
  
            .metric-5{
              opacity: 1 !important; 
            }
          }
        }
  
        .segment6_app-mobile_retail {
          width: 50%;
          height: 37%;
          background-image: var(--bg-part-circle);
          background-repeat: no-repeat;
          background-position: 0% 0%;
          align-items: end;
          justify-content: end;
  
          .metric-6 {
            top: 40px;
            right: 2rem;
            .metric-value{
              color: #FDEA9A;
            }
          }  
    
          &:hover {
            transform: translate(10px, 10px);
            opacity: 1;
  
            .metric-6{
              opacity: 1 !important; 
            }
          }
        }
        
        
        .metric-container-mobile{
          display: none;
        }
        
      }


    }
}

.container-functionalities { 
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
  .functionality-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 20px;
  
    .functionality-information {
      width: 100%;
      color: white;
      font-size: 2rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
  
      .functionality-subtitle {
        font-size: 2rem;
        font-weight: bold;
      }
  
      .functionality-subtitle {
        font-size: 1.5rem;
        font-weight: normal;
      }
    }
  
    .functionality-cards-container {
      display: flex;
      flex: 1 1 auto;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
      z-index: 1;
      padding: 0;
      transition: 1.2s ease-out;
      scroll-behavior: smooth;
      width: calc(13.8rem * 5);
      height: auto;
      scrollbar-color: #CDCDCD transparent;
      scrollbar-width: none;
      z-index: 0 !important;
      padding-bottom: 40px;
  
      mask-image: linear-gradient(to right,
        black 0%,
        black 90%,
        transparent 100%);
  
      -webkit-mask-image: linear-gradient(to right,
        black 0%,
        black 90%,
        transparent 100%);
  
      .functionality-content {
        position: relative;
        height: 26.8rem;
        width: 13.7rem;
        transition: width 0.4s ease;
        flex: 0 0 auto;
        z-index: 2;
        cursor: pointer;
        scroll-snap-align: start;
        scroll-snap-stop: always;
  
        .functionality-content-text {
          position: absolute;
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          width: 100%;
          height: 100%;
          opacity: 0;
          z-index: 1;

          h3{
            text-align: center;
            width: 100%;
            font-size: 2.5rem;
            font-weight: bold;
          }
  
          ul {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: center;
            justify-content: center;
            text-align: start;
  
            li {
              font-size: 1.5rem;
              font-weight: 600;
            }
          }
  
        }
  
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
  
        &::after {
          content: '';
          position: absolute;
          inset: 0;
          background: var(--bg-shadow);
          pointer-events: none;
          transition: background 0.3s ease;
          opacity: 0.80;
        }
      }

    }

    .custom-scrollbar {
      display: none;
      position: absolute;
      bottom: 20px;
      width: calc(13.8rem * 5);
      height: 5px;
      background-color: rgba(44, 83, 127, 0.3);
      overflow: visible; 
      z-index: 2;
      padding-top: 10px; 
      margin-top: -2px; 
    }
    
    .scroll-thumb {
      position: absolute;
      top: 0;
      left: 0;
      background-color:#CDCDCD;
      height: 100%;
      width: 40%;
      border-radius: 3px;
      transition: background-color 0.3s;
      cursor: pointer;
    }
    
    .scroll-thumb:hover {
      background-color: #555;
      }


    .functionality-cards-container.has-active.justify-end {
      justify-content: flex-end;
    }

    .functionality-cards-container::-webkit-scrollbar {
      display: none;
    } 

    .functionality-cards-container::-webkit-scrollbar-track {
      background: transparent; 
      border-radius: 4px;
    }

    .functionality-cards-container::-webkit-scrollbar-thumb {
      border-radius: 4px;
      border: 2px solid transparent;
      background-color: rgba(255, 255, 255, 0.3); 
    }

    .functionality-cards-container::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  .functionality-cards-container.has-active {
      justify-content: start;
      .functionality-content {
        width: 6rem !important;
    
        &.category-expanded {
          border-radius: 40%;
          width: 45rem !important;
    
          &::after {
            content: '';
            background: #FFFFFF;
          }
    
          .functionality-content-text {
            color: #2C537F;
            opacity: 1;
            gap: 1rem;
    
            li {
              width: 100%;
            }
          }
        }
      }
  }

  .functionality-container:hover > .custom-scrollbar {
    display: block;
  }

  .functionality-cards-container.has-active ~ .custom-scrollbar {
    display: none;
  }

}

.successful_case-results-container{
  width: 90%;
  height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0% 2%;
  gap: 1.5rem;

  .results-title-container{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    top: 0;
    left: 0;
    align-items: center;
    height: auto;
    gap: 10px;

    .results-title{
      color: white;
      font-size: 2rem;
      font-weight: bold;
    }

    .results-subtitle{
      color: white;
      font-size: 1.5rem;
      font-weight: normal;
    }
  }

  .successful_case-results {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0% 2%;
    gap: 1rem;

    .successful-case-result{
      display: flex;
      flex-direction: row;
      background-color: #9296FF;
      opacity: 0.8;
      border-radius: 20px;
      width: 40%;
      height: 12rem;
      padding: 1%;
      margin: 5px 5px;
    
      .results-content{
        position: relative; 
        width: 75%;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding-left: 20px;
  
        .results-title-time{
          width: 100%;
          color: white;
          font-size: 2.25rem;
          font-weight: bold;
          margin: 0;
        }
  
        .results-text-number{
          width: 100%;
          color: white;
          font-size: 5rem;
          font-weight: bold;
          margin: 0;
        }
  
        .results-description{
          width: 100%;
          color: white;
          font-size: 1.25rem;
          font-weight: normal;
          margin: 0;
        }
      }
      .results-image{
        width: 20%;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
      }
    } 
    
    .successful-case-result:nth-child(2){
      background-color: #3F96FF;
    }

    .successful-case-result:nth-child(3){
      background-color: #3FAFFF;
    }
    .successful-case-result:nth-child(4){
      background-color: #00B5E5;
    } 
  }
}

.succesful_case-video-container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  gap: 20px;

  .video-succesful-case-title-cotainer{
    width: 35%;
    font-size: 4rem;
    font-weight: 500;
    text-align: start;
  }

  video{
    border-radius: 1.2rem;
  }
}

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

  main {
    background-image: url(/portal/successful_case/resources/assets/images/successful_hero_mobile.webp);
  }

  .main-page-successful-case{
    .title-main{
      width: 80%;
    }
  }


  .successful_case-container{
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 20px;
    justify-content: center;
    align-items: center;
    
    .successful_case-content{
      width: 100%;
      min-height: 55dvh;
      height: auto;
      padding: 0px 10px;
      justify-content: start;
      align-items: center;
      gap: 20px;  
      margin-bottom: 0;

      .successful_case-information{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-direction: column;
        padding: 0px 25px;
        text-align: justify;
        gap: 10px;

        .successful_case-logo{
          width: auto;
          height: 4rem;
          margin-bottom: 5px;

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

        .title-successful_case{
          font-size: 1.9rem;
        }

        .subtitle-successful_case{
          margin-bottom: 10px;
        }

        .text-successful_case{
          color: white;
          font-size: 0.9rem;
          font-weight: 500;
          padding: 0% 0%;
        }

        .button_see_more_successful_case {
          padding: 10px 20px;
          width: 100%;
          height: 50px;
          font-weight: 500;
          margin-top: 1.5rem;
        }
      }

      .successful_case-images{
        display: none;
      }
    }

    .successful_case-carousel{
      width: 100%;
      gap: 0;
      

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

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

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

          .successful_case-carousel-item-information{


            .carousel-item-information-title{
              color: white;
              font-size: 0.9rem;
              font-weight: bold;
              padding: 0px 15px;
            }

            .carousel-item-information-subtitle{
              color: white;
              font-size: 0.6rem;
              font-weight: 500;
            }
          }

          img{
            position: absolute;
            object-fit: contain;
            height: 100%;
            width: 100%;
            z-index: 1;
          }
        }
      }
    }

  }

  .overview-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 40px;
    
    .overview-information{
      width: 100%;
      height: 40%;
      max-height: 50%;      
      order: 1;
      margin-bottom: 30px;
  
      .overview-information-subtitle-successful-case{
        font-size: 2rem;
        font-weight: bold;
      }
  
      .overview-information-subtitle{
        width: 100%;
        padding: 30px 0px;
      }
    }
  
    .overview-images{
      width: 100%;
      height: auto;
      padding: 0px;
      justify-content: center;
      order: 2;
  
      img{
        width: 100%;
        height: 208px;
        border-radius: 5px;
        object-fit: cover;
      }
  
      img:nth-child(2){
        display: none;
      }
    }
  }

  .tecnologies-container {  
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    justify-content: center;
    align-items: center;
    top: 2rem;
    
    .tecnology-container {
      display: flex;
      flex-direction: column;
      justify-content: start;
      gap: 30px;

      .center-circle {
        position: relative;
        width: auto;
        height: auto;
        top: 4rem;
        border-radius: 0%;
        left: 0%;
        transform: translate(0%, 0%);
        padding: 10px;
        order: 1;
      }

      .segments-tecnology-container{
        height: 50%;
        justify-content: start;
        align-items: start;
        order: 1;

        .segment{
          .metric {
            display: none;
          }
        }
  
        .segment1,
        .segment2,
        .segment3,
        .segment4 {
          background-size: 70%;
        }
  
        .segment1_app-mobile_retail,
        .segment2_app-mobile_retail,
        .segment5_app-mobile_retail,
        .segment6_app-mobile_retail{
          background-size: 65%;
        }
  
        .segment3_app-mobile_retail,
        .segment4_app-mobile_retail{
          background-size: 33%;
        }

        .segment1 {
          &:hover {
            transform: translate(-10px, -10px);
          }
        }
  
        .segment2 {
          &:hover {
            transform: translate(10px, -10px);
  
          }
        }

        .segment3 {    
          &:hover {
            transform: translate(-10px, 10px);
          }
        }
        
        .segment4 {
          &:hover {
            transform: translate(10px, 10px);
          }
        }

        .segment1_app-mobile_retail {
          width: 50%;
          height: 37%;

    
          &:hover {
            transform: translate(-10px, -10px);
          }
        }
        
        .segment2_app-mobile_retail {
          width: 50%;
          height: 37%;
    
          &:hover {
            transform: translate(10px, -10px);
          }
        }

        .segment3_app-mobile_retail {
          height: 25.3%;
          background-position: 45.5% 50%;
    
          &:hover {
            transform: translate(-10px, 0px);
            opacity: 1;
          }
        }

        .segment4_app-mobile_retail {
          height: 25.3%;
          background-position: 53.5% 50%;
  
          &:hover {
            transform: translate(10px, 0px);
          }
        }
    
        .segment5_app-mobile_retail {
          width: 50%;
          height: 37%;
    
          &:hover {
            transform: translate(-10px, 10px);
          }
        }
  
        .segment6_app-mobile_retail {
          width: 50%;
          height: 37%;
    
          &:hover {
            transform: translate(10px, 10px);
          }
        }  

        .metric-container-mobile{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 29%;
          gap: 0px;
          margin-top: 0.5rem;
  
          .metric-mobile{
            width: 100%;
            height: 100%;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0px;
  
            .metric-value {
              font-size: 4rem;
              font-weight: bold;
              color: var(--color-metric-value);
            }
  
            .metric-label {
              font-size: 1.5rem;
              font-weight: normal;
            }
          }

          .metric-mobile-active{
            display: flex !important;
            opacity: 1 !important;

            .metric-value {
              opacity: 1;
              font-size: 4rem;
              font-weight: bold;
              color: var(--color-metric-value);
            }
  
            .metric-label {
              opacity: 1;
              font-size: 1.5rem;
              font-weight: normal;
            }

          }
        }

        .hover-inactive {
          transform: translate(0px, 0px) !important;
          opacity: 0.3 !important;
        }
        
      
      }	

    }

  }

  .container-functionalities {
    padding: 0px;
    
    .functionality-container {
      width: 100%;
      gap: 5px;
      padding: 0px 25px;

      .functionality-information{
        .functionality-title{
          font-size: 1.5rem;
        }

        .functionality-subtitle{
          font-size: 1rem;
        }
      }
      
      .functionality-cards-container{
        height: calc(5.25rem * 5) !important;
        width: 100% !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        align-items: start;
        justify-content: start;
        mask-image: none;
        -webkit-mask-image: none;

        mask-image: linear-gradient(to bottom,
          black 0%,
          black 90%,
          transparent 100%);
  
        -webkit-mask-image: linear-gradient(to bottom,
          black 0%,
          black 90%,
          transparent 100%);
        
        .functionality-content {
          width: 100% !important;
          height: 5.25rem !important;
          transition: height 0.4s ease !important;
          flex: 0 0 auto !important;
          
          .functionality-content-text {
            width: 100% !important;
            height: 100% !important;
            justify-content: center;
            align-items: center;
            opacity: 0 !important;
            padding: 0.8rem !important;
            
            h3 {
              width: 100%;
              text-align: center;
              margin-bottom: 0.9rem;
              font-size: 1.4rem; 
            }

            #functionality-content-title-payments{
              margin-bottom: 0.6rem;
            }

            ul { 
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: auto;
              height: auto;
              padding-left: 0rem;
              list-style-position: inside;

              li {
                font-size: 1rem;
                text-align: start;
                margin-bottom: 0.2rem;
                line-height: 0.8rem;
                font-weight: 600;
              }
            }

            .ul-payments{
              padding-left: 3.7rem;
              list-style-position: inherit;

              li{
                margin-bottom: 0rem;
              }
            }

          }
          
          img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
          }

        }
      }

      .custom-scrollbar {
        bottom: 0;
        right: 5px;
        height: calc(5.25rem * 5) !important;
        width: 8px;
        z-index: 2;
        border-radius: 20px;
      }

      .scroll-thumb {
        top: 0;
        left: 0%;
        background-color:#CDCDCD;
        height: 50%;
        width: 100% !important;
        border-radius: 20px;
      }


      .functionality-cards-container.has-active {
        .functionality-content {
          height: 3rem !important;
          width: 100% !important;
          
          &.category-expanded {
            height: 14.25rem !important;
            width: 100% !important;
            
            .functionality-content-text {
              opacity: 1 !important;
              color: #2C537F !important;
              gap: 0.5rem !important;
              li {
                width: 100% !important;
              }
            }
          
          }
        }
      }
    }
  }

  .successful_case-results-container{
    height: auto;
    padding: 0% 4%;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
  
    .results-title-container{
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;  
      align-items: center;
      text-align: center;
      height: auto;
      gap: 5px;
  
      .results-title{
        color: white;
        font-size: 1.8rem;
        font-weight: bold;
      }

      #results-title-corporate-banking{
        font-size: 1.5rem;
      }
  
      .results-subtitle{
        color: white;
        font-size: 1.2rem;
        font-weight: normal;
      }
    }
  
    .successful_case-results {
      width: 100%;
      height: auto;
      flex-direction: column;
      justify-content: center;
      align-items: end;
      padding: 2% 0%;
      gap: 0.1rem;
  
      .successful-case-result{
        align-items: center;
        width: 100%;
        height: 6.53rem;
        padding: 1% 0%;
        margin: 3px 0px;
      
        .results-content{
          position: relative; 
          text-align: start;
          width: 70%;
          height: 100%;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
    
          .results-title-time{
            color: white;
            font-size: 1.25rem;
            font-weight: bold;
            margin: 0;
          }
    
          .results-text-number{
            color: white;
            font-size: 2.8rem;
            font-weight: bold;
          }

          .results-description{
            width: 100%;
            font-size: 0.9rem;
          }

        }
        .results-image{
          width: 30%;
          height: 50%;
          align-items: center;
          display: flex;
          justify-content: center;

          img{
            width: auto;
            height: 100%;
          }
        }
      }  
    }
  }

  .succesful_case-video-container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 50px;
    padding: 0% 4%;
  
    .video-succesful-case-title-cotainer{
      width: 55%;
      font-size: 1.5rem;
      font-weight: 500;
      text-align: center;
    }

    video{
      width: 100%;
      height: 100%;
    }
  
  }

}

/* navegador Edge mobile o dispositivos pequeños */
@media only screen and (max-width: 480px) and (max-height: 680px) {

  .successful_case-container {
    height: 100dvh;
    padding: 0px 10px;
    gap: 0px;
    justify-content: center;
    align-items: start;
    
    .successful_case-content {
      justify-content: start;
      align-items: start;
      height: auto;
      min-height: 50dvh;
      width: 100%;
      
      .successful_case-information { 
        height: auto;
        width: 100%;
      }
    }

    .successful_case-carousel {

      height: auto;
      width: 100%;
      display: flex;
      justify-content: center;
    }

  }

  .overview-container {
      height: 100dvh;
      justify-content: center;
      align-items: start;
      gap: 30px;

      .overview-information{
        justify-content: end;
        margin-bottom: 0px;
      }
  
      .overview-images{
      img{
        height: auto;
        max-height: 208px;
      }

    }
  }

  .tecnologies-container {  
    height: 100%;
    top: 0rem;
    padding: 10px 0px;

    
    .tecnology-container {
      height: 89% !important;
      display: flex;
      flex-direction: column;
      justify-content: start;
      gap: 0px;

      .center-circle {
        top: 0rem;
      }

      .segments-tecnology-container{
        height: 50dvh;
        justify-content: start;
        align-items: start;
      
        .metric-container-mobile{
          justify-content: start;
          align-items: center;
          height: auto;
          gap: 0px;
          margin-top: 0;

          .metric-mobile{
            justify-content: start;
            align-items: center;
  
            .metric-value {
              font-size: 3.62rem;
            }
  
            .metric-label {
              font-size: 1.25rem;
            }
          }

          .metric-mobile-active{
            .metric-value {
              font-size: 3.5rem;
            }
  
            .metric-label {
              font-size: 1.25rem;
            }
          }

        }
      }	

    }

  }

  .successful_case-results-container{
    height: 100dvh;
    padding: 0% 4%;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
  
    .results-title-container{
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;  
      align-items: center;
      text-align: center;
      height: auto;
      gap: 5px;
  
      .results-title{
        color: white;
        font-size: 1.7rem;
        font-weight: bold;
      }

      #results-title-corporate-banking{
        font-size: 1.5rem;
      }
  
      .results-subtitle{
        color: white;
        font-size: 1.2rem;
        font-weight: normal;
      }
    }
  
    .successful_case-results {
      .successful-case-result{
        height: 5.8rem;
      
        .results-content{
          position: relative; 
          text-align: start;
          width: 70%;
          height: 100%;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;

          .results-title-time{
            font-size: 1.15rem;
          }
    
          .results-text-number{
            color: white;
            font-size: 2.5rem;
            font-weight: bold;
          }

          .results-description{
            width: 100%;
            font-size: 0.9rem;
          }

        }
      }  
    }
  }
  
}

/* Tablet */
@media screen and (min-width: 480px) and (max-width: 1000px){
  
  main{
    background-image: url(/portal/successful_case/resources/assets/images/successful_hero_tablet.webp);
  }

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

    .successful_case-content{
      height: auto;
      flex-direction: column;
      justify-content: start;
      padding: 0px 120px;
      gap: 25px;
      margin-bottom: 0px;

      .successful_case-information{
        width: 100%;
        height: auto;
        padding: 10px;
        gap: 10px;
        order: 1;

        .successful_case-logo{
          height: auto;
          margin-bottom: 5px;
        }

        .title-successful_case{
          font-size: 2rem;
        }

        .subtitle-successful_case{
          margin-bottom: 10px;
        }

        .text-successful_case{
          font-size: 0.9rem;
          padding: 0% 0%;
        }

        .button_see_more_successful_case {
          padding: 10px 20px;
          width: 25%;
          height: 50px;
          font-weight: 500;
        }
      }

      .successful_case-images{
        width: 100%;
        padding: 10px;
        justify-content: center;
        order: 2;

        img{
          max-height: 414px;
          width: 254px;
        }

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

    .successful_case-carousel{
      position: relative;
      height: auto;

      .successful_case-carousel-items{

        .successful_case-carousel-item{
          width: 6.4rem;
          height: 5.5rem;
        }
      }
    }

  }

  .overview-container {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .overview-information{
      gap: 10px;
      width: 75%;
      height: 30%;
      order: 1;
      margin-bottom: 30px;
  
      .overview-information-title{
        color: white;
        font-size: 1.5rem;
        font-weight: 400;
      }
  
      .overview-information-subtitle{
        height: auto;
        width: 100%;
        color: white;
        font-size: 1rem;
        font-weight: 500;
        padding: 30px 0px;
      }
    }
  
    .overview-images{
      width: auto;
      height: 50%;
      padding: 0px;
      justify-content: center;
      order: 2;
  
      img{
        width: auto;
        height: auto;
        max-height: 271px;
        max-height: 443px;
        min-height: 400px;
        min-width: 260px;
        object-fit: contain;
        border-radius: 5px;
      }
  
      img:nth-child(2){
        transform: translateY(1vh);
      }
    }
  

  }

  .tecnologies-container {
    position: relative;
    width: 100vw;
    height: 75dvh;
    padding: 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    .tecnology-container {
      position: absolute;
      display: none;
      flex-wrap: wrap;
      width: 96%; 
      height: 100%;
      justify-content: center;
      align-items: center;


      .center-circle {
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        h2 {
          margin: 0;
          font-size: 25px;
          text-align: center;
        }
        
        p {
          margin: 5px 0 0;
          font-size: 16px;
          opacity: 0.8;
          text-align: center;
        }
      }

      .segment{
        position: relative;
        width: 50%;
        height: 50%;
        display: flex;
        .metric {
          .metric-value {
            font-size: 3.7rem;
            font-weight: bold;
            margin: 0;
          }
          
          .metric-label {
            width: 100%;
            font-size: 1.5rem;
            margin: 0;
            
          }
        }
        .metric.active {
          opacity: 1 !important;
        }
      }
  
      .segment1,
      .segment2,
      .segment3,
      .segment4 {
        background-size: 65% !important;
      }

      .segment1_app-mobile_retail,
      .segment2_app-mobile_retail,
      .segment5_app-mobile_retail,
      .segment6_app-mobile_retail{
        background-size: 57% !important;
      }

      .segment3_app-mobile_retail,
      .segment4_app-mobile_retail{
        background-size: 30.8% !important;
      }

      .segment1 { 
        .metric-1 {
          top: 0px !important;
          .metric-value{
            color: #00B5E5;
          }
        }
  
        &:hover {
          transform: translate(-10px, -10px);
          opacity: 1;

          .metric-1{
            opacity: 1 !important; 
          }

        }
      }
      
      .segment2 {

        .metric-2 {
          top: 0px !important;
          .metric-value{
            color: #9296FF;
          }
        }
  
        &:hover {
          transform: translate(10px, -10px);
          opacity: 1 ;
          .metric-2{
            opacity: 1 !important; 
          }
        }
      }
      
      .segment3 {
        align-items: end;
        .metric-3 {
          bottom: 0 !important;
          .metric-value{
            color: #FFE992;
          }
        }
  
        &:hover {
          transform: translate(-10px, 10px);
          opacity: 1;

          .metric-3{
            opacity: 1 !important; 
          }
        }
      }
      
      .segment4 {
        .metric-4 {
          bottom: 0 !important;
          .metric-value{
            color: #00E5D2;
          }
        }
  
        &:hover {
          transform: translate(10px, 10px);
          opacity: 1;

          .metric-4{
            opacity: 1 !important; 
          }
        }
      }

      .segment1_app-mobile_retail {
        width: 50%;
        height: 40% !important;
        background-image: var(--bg-part-circle);
        background-repeat: no-repeat;
        background-position: 100% 100%;
        opacity: 0.3;

        .metric-1 {
          top: 0px !important;
          left: 8%;
          .metric-value{
            color: #FF92F6;
          }
        }
  
        &:hover {
          transform: translate(-10px, -10px);
          opacity: 1;     

          .metric-1{
            opacity: 1 !important; 
          }   
        }
      }
      
      .segment2_app-mobile_retail {
        width: 50%;
        height: 40% !important;
        background-image: var(--bg-part-circle);
        background-repeat: no-repeat;
        background-position: 0% 100%;
        opacity: 0.3;

        .metric-2 {
          top: 0px !important;
          right: 8%;
  
          .metric-value{
            color: #9296FF;
          }
        }
  
        &:hover {
          transform: translate(10px, -10px);
          opacity: 1 ;

          .metric-2{
            opacity: 1 !important; 
          }
        }
      }
      
      .segment3_app-mobile_retail {
        width: 50%;
        height: 20% !important;
        background-image: var(--bg-part-circle);
        background-repeat: no-repeat;
        background-position: 56% 50% !important;
        opacity: 0.3;

        .metric-3 {
          left: -3% !important;
  
          .metric-value{
            color: #C4FCFF;
          }
        }
  
        &:hover {
          transform: translate(-10px, 0px);
          opacity: 1;
          background-size: 30%;

          .metric-3{
            opacity: 1 !important; 
          }
        }
      }
      
      .segment4_app-mobile_retail {
        width: 50%;
        height: 20% !important;
        background-image: var(--bg-part-circle);
        background-repeat: no-repeat;
        background-position: 43% 50% !important;
        align-items: end !important;
        justify-content: end !important;
        opacity: 0.3;

        .metric-4 {
          right: -3% !important;
  
          .metric-value{
            color: #00E5D2;
          }
        }
  
        &:hover {
          transform: translate(10px, 0px);
          opacity: 1;
          background-size: 30%;

          .metric-4{
            opacity: 1 !important; 
          }
        }
      }
  
      .segment5_app-mobile_retail {
        height: 40.5% !important;
        background-position: 100% 0%;
        opacity: 0.3;

        .metric-5 {
          top: 0px;
          bottom: 0px !important;
          left: 8%;
  
          .metric-value{
            color: #3FB2E2;
          }
        }
  
        &:hover {
          transform: translate(-10px, 10px);
          opacity: 1;

          .metric-5{
            opacity: 1 !important; 
          }
        }
      }

      .segment6_app-mobile_retail {
        height: 40.5% !important;
        background-position: 0% 0%;
        opacity: 0.3;

        .metric-6 {
          top: 0px;
          bottom: 0px !important;
          right: 8%;
  
          .metric-value{
            color: #FFE992;
          }
        }  
  
        &:hover {
          transform: translate(10px, 10px);
          opacity: 1;

          .metric-6{
            opacity: 1 !important; 
          }
        }
      }  
    }
  }

  .container-functionalities {
    height: 100%; 
    width: 100%;
    padding: 0;

    .functionality-container {
      height: auto;
      position: relative;
      padding: 0;

      .functionality-cards-container {
        height: calc(8.8rem * 5) !important;
        width: 100% !important;
        padding: 0px 3.5rem;
        flex-direction: column;
        overflow-x: hidden !important;
        overflow-y: auto;

        mask-image: linear-gradient(to bottom,
          black 0%,
          black 90%,
          transparent 100%);
  
        -webkit-mask-image: linear-gradient(to bottom,
          black 0%,
          black 90%,
          transparent 100%);
    
          .functionality-content {
            width: 100% !important;
            height: 8.8rem !important;
            transition: height 0.4s ease !important;
    
            .functionality-content-text {
              transition: opacity 0.3s ease !important;
              padding: 0.5rem !important;
    
              ul {
                gap: 0.8rem ;
                li {
                  font-size: 1.5rem;
                  line-height: 0.9;
                }
              }
            }
    
          }
      }

      .custom-scrollbar {
        position: absolute;
        bottom: 0;
        right: 30px;
        width: 5px;
        height: calc(8.8rem * 5);
        background-color: rgba(44, 83, 127, 0.3);
        overflow-y: visible; 
        z-index: 5;
      }

      .scroll-thumb {
        position: absolute;
        top: 0;
        left: 0;
        background-color:#CDCDCD;
        height: 30%;
        border-radius: 3px;
        transition: background-color 0.3s;
      }
    
      .functionality-cards-container.has-active {
        .functionality-content {
          height: 5.15rem !important;
          width: 100% !important;
    
          &.category-expanded {
            height: 23.2rem !important;
            width: 100% !important;
    
            .functionality-content-text {
              gap: 0.7rem;
            }
          }
        }
      }
    }
  }

  .successful_case-results-container{
    width: 100%;
    height: auto;
    flex-direction: row;
    gap: 0.9rem;
  
    .successful_case-results {
      text-align: center;
      padding: 2% 0%;
      gap: 1rem;
  
      .successful-case-result{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 32dvh;
        padding: 3% 0%;
      
        .results-content{
          width: 100%;
          height: 100%;
          padding-left: 0px;
    
          .results-title-time{
            color: white;
            font-size: 2.25rem;
            font-weight: bold;
            margin: 0;
          }
    
          .results-text-number{
            font-size: 4rem;
          }

        }
        .results-image{
          width: 20%;
          height: 40%;
          align-items: center;
          display: flex;
          justify-content: center;

          img{
            width: auto;
            height: 100%;
          }
        }
      }  
    }
  }

  .succesful_case-video-container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 50px;
    padding: 0% 4%;
  
    .video-succesful-case-title-cotainer{
      width: 65%;
      font-size: 4rem;
      font-weight: 500;
      text-align: center;
    }

    video{
      width: 100%;
      height: 100%;
    }
  
  }
}

@media screen and (min-width: 480px) and (max-width: 1000px) and (max-height: 960px) {
  .successful_case-container{
    height: 96dvh;
    gap: 10px;
    justify-content: start;
    align-items: center;

    .successful_case-content{
      gap: 25px;

      .successful_case-information{
        width: 100%;
        height: auto;
        padding: 10px;
        gap: 10px;
        order: 1;
      }

      .successful_case-images{

        img{
          max-height: 350px;
          width: 254px;
        }

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

  }
}

/* Desktop pantallas pequeñas */
@media only screen and (min-width: 1000px) and (min-height: 570px) and (max-height: 650px) {

  .successful_case-container{
    height: 100%;
    padding: 0px 30px;
    gap: 1.9rem;
    
    .successful_case-content {
      min-height: 65%;
      height: auto;

      .successful_case-images{
        display: flex;
        flex-direction: row;
        width: 51%;
        height: auto;
        gap: 20px;
        padding-bottom: 15px;
        justify-content: end;
        align-items: start;
    
        img{
          width: auto;
          max-height: 300px;
        }

        img:nth-child(1){
          transform: translateY(-1.3vh);
        }
        
        img:nth-child(2){
          transform: translateY(3.5vh);
        }
      }  
      .successful_case-information {
        justify-content: end;
        padding: 20px 20px;
        gap: 6px;

        .successful_case{
          width: 21rem;
          height: 6.3rem;
        }

        .title-successful_case{
          color: white;
          font-size: 2.25rem;
          font-weight: bold;
          margin-bottom: 0px;
        }

        .subtitle-successful_case{
          margin-bottom: 25px;
        }
      }      
    }

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

    .successful_case-carousel{
      width: 100%;
      height: 22%;
      gap: 4%;
      bottom: 0; 
      padding-bottom: 3px;
    }

  }

  .tecnologies-container{
    height: 92vh;
  }

  .container-functionalities { 
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  
    .functionality-container {
    /* background-color: #2C537F; */
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: auto;
      gap: 20px;
  
  
    .functionality-cards-container {
      width: calc(13.8rem * 5);
      height: auto;
      padding-bottom: 40px;
  
      .functionality-content {
        height: 25.5rem;
        width: 13.7rem;
      }
    }

  }
}

}

@media only screen and (min-width: 1000px) and (max-height: 569px) {

  .successful_case-container{
    height: 100%;
    padding: 10px 30px;
    gap: 3px;

    .successful_case-content {
      min-height: 59%;
      height: auto;

      .successful_case-images{
        display: flex;
        flex-direction: row;
        width: 51%;
        height: auto;
        gap: 20px;
        padding: 5px;
    
        img{
          max-height: 275px;  
        }

        img:nth-child(1){
          transform: translateY(-1.3vh);
        }
        
        img:nth-child(2){
          transform: translateY(3.5vh);
        }
      }  
      .successful_case-information {
        justify-content: end;
        padding: 20px 20px;
        gap: 6px;

        .successful_case{
          width: 21rem;
          height: 6.3rem;
        }

        .title-successful_case{
          color: white;
          font-size: 2.15rem;
        }

        .subtitle-successful_case{
          margin-bottom: 25px;
        }

        .text-successful_case{
          font-size: 0.9rem;
          padding: 0% 12%;
        }

        .button_see_more_successful_case {
          padding: 10px 20px;
          width: 117px;
          height: 47px;

      }      
      }
    }

    .successful_case-carousel{
      width: 100%;
      height: 22%;
      gap: 4%;
      bottom: 0;

      .successful_case-carousel-prev,
      .successful_case-carousel-next{
        width: 40px;
        height: 40px;
      }
  
      .successful_case-carousel-items{      

        .successful_case-carousel-item{
          width: 14.5vmin;
          height: 12.5vmin;

          .successful_case-carousel-item-information{

            .carousel-item-information-title{
              color: white;
              font-size: 0.8rem;
              font-weight: bold;
              padding: 0px 15px;
            }

            .carousel-item-information-subtitle{
              color: white;
              font-size: 0.55rem;
              font-weight: 500;
            }
          }
        }        
      }  
    }
  }

  .tecnologies-container{
    height: 92vh;
  }

  .container-functionalities { 
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  
    .functionality-container {
    /* background-color: #2C537F; */
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: auto;
      gap: 20px;
  
  
    .functionality-cards-container {
      width: calc(13.8rem * 5);
      height: auto;
      padding-bottom: 40px;
  
      .functionality-content {
        height: 25.5rem;
        width: 13.7rem;
      }
    }

  }
  }

}