/***************************************************
 * Generated by SVG Artista on 8/31/2024, 2:51:17 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 svg .svg-elem-1 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  }
  
  svg.active .svg-elem-1 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-2 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  }
  
  svg.active .svg-elem-2 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-3 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
  
  svg.active .svg-elem-3 {
    fill: url("#id2");
  }
  
  svg .svg-elem-4 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  }
  
  svg.active .svg-elem-4 {
    fill: url("#id4");
  }
  
  svg .svg-elem-5 {
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  }
  
  svg.active .svg-elem-5 {
  }
  
  svg .svg-elem-6 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  }
  
  svg.active .svg-elem-6 {
    fill: url("#id3");
  }
  
  svg .svg-elem-7 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  }
  
  svg.active .svg-elem-7 {
    fill: url("#id2");
  }
  
  svg .svg-elem-8 {
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  }
  
  svg.active .svg-elem-8 {
  }
  
  /* Correção para Shape Dividers - Adicione ao custom.css */

/* Shape Divider da section "Como Funciona" (bottom) */
#como-funciona .shape-divider-bottom {
    height: 260px;
    line-height: 0;
    overflow: hidden;
    position: relative;
    bottom: -1px; /* Pequeno ajuste para colar na section de baixo */
}

#como-funciona .shape-divider-bottom svg {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateY(1px); /* Move 1px para baixo para colar melhor */
}

/* Shape Divider da section "Clientes" (top) */
#clientes .shape-divider {
    height: 109px;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    top: -1px; /* Pequeno ajuste para colar no shape de cima */
    left: 0;
    width: 100%;
    z-index: 1; /* Garantir que fique atrás do conteúdo */
}

#clientes .shape-divider svg {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateY(-1px); /* Move 1px para cima para colar melhor */
}

/* ESCONDER o path preto dentro do shape de clientes */
#clientes .shape-divider svg path[fill="#0a0a0a"] {
    display: none !important;
}

/* OU mudar a cor para laranja */
/* #clientes .shape-divider svg path[fill="#0a0a0a"] {
    fill: #f49221 !important;
} */

/* Shape Divider BOTTOM da section "Clientes" - esconder ou reposicionar */
#clientes .shape-divider-bottom {
    height: 160px;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    bottom: 0; /* No fundo da section, não no topo */
    left: 0;
    width: 100%;
}

#clientes .shape-divider-bottom svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ajustes Responsivos */

/* Telas Extra Grandes (acima de 1920px) */
@media (min-width: 1920px) {
    #como-funciona .shape-divider-bottom {
        height: 320px;
    }
    
    #clientes .shape-divider {
        height: 140px;
    }
}

/* Full HD (1920x1080) */
@media (min-width: 1440px) and (max-width: 1919px) {
    #como-funciona .shape-divider-bottom {
        height: 280px;
    }
    
    #clientes .shape-divider {
        height: 120px;
    }
}

/* Telas Médias/Grandes (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    #como-funciona .shape-divider-bottom {
        height: 240px;
    }
    
    #clientes .shape-divider {
        height: 100px;
    }
}

/* Tablets Landscape (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    #como-funciona .shape-divider-bottom {
        height: 180px;
    }
    
    #clientes .shape-divider {
        height: 80px;
    }
}

/* Tablets Portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #como-funciona .shape-divider-bottom {
        height: 120px;
    }
    
    #clientes .shape-divider {
        height: 60px;
    }
}

/* Mobile Landscape (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    #como-funciona .shape-divider-bottom {
        height: 80px;
    }
    
    #clientes .shape-divider {
        height: 40px;
    }
}

/* Mobile Portrait (até 575px) */
@media (max-width: 575px) {
    #como-funciona .shape-divider-bottom {
        height: 60px;
    }
    
    #clientes .shape-divider {
        height: 30px;
    }
}

/* Garantir que não haja espaços entre sections */
#como-funciona {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#clientes {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
}

/* Ajustar o container interno para compensar o shape */
#clientes .container:first-of-type {
    padding-top: 8rem; /* Aumentado para dar mais espaço */
    position: relative;
    z-index: 2; /* Garantir que fique acima dos shapes */
}

/* Ajuste adicional para tablets e mobile */
@media (max-width: 991px) {
    #clientes .container:first-of-type {
        padding-top: 6rem;
    }
}

@media (max-width: 767px) {
    #clientes .container:first-of-type {
        padding-top: 5rem;
    }
}

@media (max-width: 575px) {
    #clientes .container:first-of-type {
        padding-top: 4rem;
    }
}

/* Ajuste adicional para o SVG manter proporções */
.shape-divider svg,
.shape-divider-bottom svg {
    preserveAspectRatio: none;
    vertical-align: middle;
}