@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --azul-tabela: #11334d;
    --mascara: #151521;
    --azul: #2d7cba;
    --azul-claro: #1fceff;
    --azul-hover: #1a4b70;
    --bg-clarinho: #eeeff0;
    --roxo-claro: #0f182e;
    --roxo-cinza: #6a6a84;
    --laranja: #e55525;
    --azul-menu: #382294;
    --verde-what: #25D366;
    --borda-faq: #3e9ae3;
    --verde-topo: #8bb83c;
}

.inter-regular{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
}
.inter-medium{
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-optical-sizing: auto;
    font-style: normal;
}
.inter-semi-bold{
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-optical-sizing: auto;
    font-style: normal;
}
.inter-bold{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-optical-sizing: auto;
    font-style: normal;
}

.slide .swiper .swiper-button-next, .slide .swiper .swiper-button-prev{
    top: 6%;
    right: -15px;
}
.slide .swiper .swiper-button-next svg, .slide .swiper .swiper-button-prev svg{
    width: 20%;
    color: #6a6a84;
}
.slide .swiper .swiper-pagination{
    top: 19px;
    /* left: calc(-45%); */
    height: 4px;
}
.slide .swiper .swiper-pagination span{
    border-radius: 0%;
    width: 25px;
    height: 3px;
    background-color: #82b7e0;
}
.slide .swiper .swiper-pagination .swiper-pagination-bullet-active{
    background-color: #e55525;
}

.video .plyr__control--overlaid{
    background-color: #2d7cba;
    color: #2d7cba;
    width: 67px;
    height: 67px;
}
.video .plyr__control--overlaid::after{
    content: "\f04b";
    font-family: FontAwesome;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
    background-color: white;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 47px;
    height: 47px;
    border-radius: 110px;
}

.produtos .splide__arrow {
  background: transparent;        
  width: 40px;
  height: 40px;
}
.produtos .splide__arrow svg {
  fill: #6a6a84;       
  width: 20px;
  height: 20px;
  font-weight: 900;   
}
.produtos .splide__pagination{
    top: -415px;
}
.produtos .splide__pagination .splide__pagination__page{
    width: 35px;
    border-radius: 0;
    height: 3px;
    background-color: #eeeff0;
    opacity: 1;
}
.produtos .splide__pagination .is-active{
    background-color: #e55525;
    transform: scale(1);
    opacity: 1;
}

@media(min-width:768px){
    .produtos .splide .splide__track .splide__list .is-next{
        mask-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.436),rgba(255, 255, 255, 0.436));
        -webkit-mask-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.436),rgba(255, 255, 255, 0.436));
        mask-mode: alpha;
    }
    .produtos .splide .splide__track .splide__list .is-prev{
        mask-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.436),rgba(255, 255, 255, 0.436));
        -webkit-mask-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.436),rgba(255, 255, 255, 0.436));
        mask-mode: alpha;
    }
} 

@media(min-width:1536px){
    .slide .swiper .swiper-button-next {
        top: 56%;
        right: 220px;
    }
    .slide .swiper .swiper-button-prev {
        top: 56%;
        left: 220px;
    }
    .slide .swiper .swiper-pagination {
        top: 42px;
        height: 5px;
        left: 289px;
        width: 100px;
    }
}


/* Página empresa */
/* #foto-topo{
    background-image: url('./src/images/Empresa/bg-cabecalho-mobile-06.webp');
    background-size: cover;
}
@media(min-width:640px){
    #foto-topo{
        background-image: url('./src/images/Empresa/bg-cabecalho-desktop.webp');
    }
} */
.swiper-empresa .swiper-pagination span{
    border-radius: 0%;
    width: 25px;
    height: 3px;
    opacity: 1;
    background-color: #ffffff;
}
.swiper-empresa .swiper-pagination .swiper-pagination-bullet-active{
    background-color: #e55525;
}

/* SBL */
.swiperum .swiper-pagination span, .swiperdois .swiper-pagination span{
    border-radius: 0%;
    width: 25px;
    height: 3px;
    opacity: 1;
    background-color: white;
}
.swiperum .swiper-pagination .swiper-pagination-bullet-active, .swiperdois .swiper-pagination .swiper-pagination-bullet-active, .swiper-um-tank .swiper-pagination .swiper-pagination-bullet-active, .swiper-dois-tank .swiper-pagination .swiper-pagination-bullet-active{
    background-color: #e55525;
}
.swiperquatro .swiper-pagination span, .container-swiper-sps .swiper-pagination span, .container-swiper-tank .swiper-pagination span, .container-swiper-tanque .swiper-pagination span{
    border-radius: 0%;
    width: 25px;
    height: 3px;
    opacity: 1;
    background-color: var(--laranja);
}
.swiperquatro .swiper-pagination .swiper-pagination-bullet-active, .container-swiper-sps .swiper-pagination .swiper-pagination-bullet-active, .container-swiper-tank .swiper-pagination .swiper-pagination-bullet-active, .container-swiper-tanque .swiper-pagination .swiper-pagination-bullet-active{
    background-color: var(--roxo-claro);
}

/* Tank */
.swiper-um-tank .swiper-pagination span,  .swiper-dois-tank .swiper-pagination span{
    border-radius: 0%;
    width: 15px;
    height: 2px;
    opacity: 1;
    background-color: white;
}
.swiper-um-tank .swiper-pagination-bullet, .swiper-dois-tank .swiper-pagination-bullet{
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 1.5px) !important;
}

/* Tanque e CLAMPS */
.container-swiper-tanque .swiper-pagination span{
    border-radius: 0%;
    width: 16px;
    height: 3px;
    opacity: 1;
    background-color: var(--laranja);
}
.container-swiper-tanque .swiper-pagination .swiper-pagination-bullet-active{
    background-color: var(--roxo-claro);
}

/* Classes JS */
/* Classes JS */
.cor-menu-blur{
    background-color: transparent;
    transition: background-color 0.3s ease;
}
.cor-menu-blur.scrolled{
    box-shadow: rgb(255, 255, 255) 0px 0px 4.457px 0px inset;
    background-color:rgb(238, 239, 240, 0.75);
    backdrop-filter: blur(17.5px);
}
.st3.scrolled{
    fill: black;
}
.topicos-topo{
    color: white !important;
}
.topicos-topo.scrolled{
    color: black !important;
}

/* menu mobile */
.menu-mobile-ativo{
    transform: translateY(0%);
    top: 70px !important;
}

.rotate-seta{
    transform: rotate(180deg);
    transition: .3s ease-in;
}