/****** BANNER SOLUÇÕES *******/

.container-banner {
    position:relative;
    margin-top:84px;
    padding:0;
}

.banner-image {
    width:100%;
    height:18.188rem;
    object-fit: cover;
    z-index:1;
}

.gradiente-banner {
    position: absolute;
    left:0;
    top:0;
    height:18.188rem;
    width:100%;
    background:linear-gradient(90deg, rgba(8, 11, 63) 0%,
    rgba(8, 11, 63, 0) 100%);
    z-index:10;
}

.text-banner {
    position:absolute;
    top:138px;
    color:var(--off-white);
    z-index:20;
}

.setas-banner {
    margin:8px;
}

.text-banner h1 {
    font-size: 3rem;
    line-height: 3.5rem;
    margin: 0 0 20px 0;
}

.text-banner-top {
    display:flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.563rem;
    letter-spacing: 1.5px;
}

/****** MEDIA QUERIES BANNER SOLUÇÕES ******/

@media only screen and (max-width: 1160px) { 
    .text-banner h1 {
        font-size: 2.5rem;
    }
}
@media only screen and (max-width: 800px) {
    .text-banner {
        top:72px;
    }
    .text-banner h1 {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }
    .banner-image {
        height:13.5rem;
    }
    .gradiente-banner {
        height:13.5rem;
        background:linear-gradient(360deg, rgba(8, 11, 63) 0%,rgba(8, 11, 63, 0) 100%);
    }
}

/****** SEÇÃO SOLUÇÕES ******/

.container-solucao {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

.container-solucao h4 {
    color: var(--grey-bold);
    margin:19px 0;
    font-size: 1.125rem;
    font-weight: 900;
}

.container-solucao ul{
    color: var(--grey-lighter);
    list-style: none;
    font-size: 0.875rem;
    padding:0;
    margin-top: 0;
}

.container-solucao li {
    display:flex;
    align-items: center;
    height:2rem;
    padding-right:10px;
    border-bottom: 1px solid  #D9DBE9;;
}

.selectedLi::before {
    content: "";
    display:inline-block;
    background-color:var(--blue-lighter);
    margin-right:4px;
    width:3px;
    height:13px;
    border-radius: 5px;
}


.conteudo-solucao {
    color: var(--grey-stronger);
    width:74%;
    margin:5px 0;
    font-size: 0.875rem;
    line-height: 1.625rem;
}

.portfolio-top {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top:30px;
}

.conteudo-solucao button {
    border: 2px solid var(--blue-stronger);
    border-radius: 5px;
    color: var(--blue-stronger);
    background: none;
    width:14.375rem;
    font-size:0.688rem;
    letter-spacing: 0.4px;
    font-weight: 600;
    height:2rem;
    cursor: pointer;
}

.only-phone {
    display: none;
}

.portfolio-list {
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    color:var(--grey-lighter);
    font-size:0.875rem;
}

.portfolio-list div {
    margin-right:24px;
    cursor:pointer;
}

.conteudo-solucao select {
    display:none;
    background-color: var(--pure-white);
    border-radius: 4px; 
    color: var(--grey-lighter);
    padding-left: 5px;
    height:2rem;
    width:9rem;
}

.container-slider  {
    position:relative;
}

.seta-slider{
    position:absolute;
    top:90px;
    width:13px;
    height:23px;  
    z-index:200;
    background-color: var(--off-white);
    padding:3px;
}

.seta-esquerda {
    left:-25px;
}

.seta-direita {
    right:-25px;
}

.slider-portfolio{
    display: flex;
    overflow:hidden;
    transition: all 0.3s;
    width: 100%;
    height: 100%;
}

.slider-item{
    margin: 15px;

}

.slider-item-imagem{
    width:230px;
    height:208px;
    border-radius: 1rem;
    box-shadow: 3px 3px 5px 0px rgba(82,82,82,0.39);
    -webkit-box-shadow: 3px 3px 5px 0px rgba(82,82,82,0.39);
    -moz-box-shadow: 3px 3px 5px 0px rgba(82,82,82,0.39);
}

/****** MEDIA QUERIES SOLUÇÕES ******/
@media only screen and (max-width: 1500px) { 
    .slider-item{
        margin:9px;
    }
    .slider-item-imagem{
        width:230px;
    }
}


@media only screen and (max-width: 1160px) { 
    .conteudo-solucao {
        width:100%;
    }
    .slider-item{
        margin-right:20px;
    }
    .slider-item-imagem{
        width:255px;
        height:230px;
    }
    .seta-slider{
        top:100px;
    }
}

@media only screen and (max-width: 800px) { 
    .conteudo-solucao select {
        display:block;
    }
    .slider-portfolio {
        flex-wrap: wrap;
        overflow:visible;
    }
    .slider-item{
        width:45%;
        height:45%;
        margin:3px 6px;
    }
    .slider-item-imagem{
        width:100%;
        height:45%;
    }
    .conteudo-solucao select {
       margin-bottom:16px;
    }
    .only-phone{
        display:block;
    }
    .button-portfolio-phone {
        display:flex;
        justify-content: center;
        margin:20px auto 0;
    }
}


/****** SEÇÃO FALE COM A GENTE ******/
.container-contato {
    position:relative;
    margin-top: 60px;
    padding:0;
}

.imagem-background-contato {
    width:100%;
    height:40.813rem;
    object-fit: cover;
    z-index:1;
}

.gradiente-contato {
    position: absolute;
    left:0;
    top:0;
    height:40.813rem;
    width:100%;
    z-index:10;
    background:linear-gradient(270deg, rgba(8, 11, 63) 20%,
    rgba(8, 11, 63, 0) 100%)
}

.gradiente-contato2 {
        position: absolute;
        left:0;
        top:0;
        height:40.813rem;
        width:100%;
        z-index:11;
        opacity:0.3;
        background-color:black;
}

.above-gradiente {
    position:absolute;
    top:0;
    left:0;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 50;
}

.above-gradiente h1 {
    font-size: 2rem;
    font-weight: 400;
}

.above-gradiente p{
    font-size: 0.875rem;
    line-height: 1.625rem ;
    font-weight: 300;

}

.container-formulario {
    width:45%;
    margin-top:40px;
    color: var(--pure-white);
}

.input-div {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    margin:9px;
    font-size: 0.875rem;
}

.container-formulario input {
    height:2.5rem;
    border-radius: 6px;
    padding-left:5px;
    font-size:1rem
}

.container-formulario input::placeholder{
    font-size:0.875rem
}
.container-formulario textarea {
    height:6rem;
    border-radius: 6px;
    margin-top:10px;
    margin-bottom: 7px;
    font-size:1rem;
    padding:5px
}

.container-formulario textarea::placeholder {
    font-size: 0.875rem;
    font-family:'Mulish', sans-serif;
    
}

.button-contato{
    border-radius: 6px;
    border: 2px solid var(--blue-lighter) ;
    background-color: var(--blue-lighter);
    color: var(--pure-white);
    width:97%;
    height:2.8rem;
    margin:1.5%;
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 0.7px;
}

.text-above-gradiente {
    color: var(--pure-white);
    margin-top:40px;
    width:45%;

}

/****** MEDIA QUERIES SEÇÃO FALE COM A GENTE ******/
@media only screen and (max-width: 800px) {
    .gradiente-contato {
        height:43rem;
        background:linear-gradient(0deg, rgba(8, 11, 63) 20%,
        rgba(8, 11, 63, 0) 100%)
    }
    .container-contato {
        margin-top: 2.5rem;
    }
    .imagem-background-contato {
        height:43rem;
    } 
    .above-gradiente {
        flex-wrap: wrap;
    }
    .above-gradiente h1{
        margin-top:8px;
    }
    .above-gradiente p {
        font-size: 0.75rem;
        line-height: 1.188rem ;
    }
    .container-formulario {
        width:100%;
        margin-top: 5px;
        margin-bottom:3px;
        margin-left:0;
    }
    .text-above-gradiente {
        margin-top:34px;
        width:100%;
    }
    .container-formulario textarea {
        height:5rem;
        margin:0;
     }
    .button-contato{
        width:50%;
        height:2rem;
        font-size: 0.7rem;
        margin-left:25%;
    }
}


.pagina-sistemas h1 {
    font-size: 3rem;
    color: var(--grey-bold);
    text-align: center;
    margin:0;
    padding-bottom: 8px;
}
.pagina-sistemas h3 {
    font-size:1.2rem;
    color:var(--blue-lighter);
    margin: 0;
}

.pagina-sistemas h2 {
    font-size: 2.3rem;
    color: var(--grey-bold);
    text-align: center;
    margin:0;
    padding: 40px 0 10px 0;
}

.pagina-sistemas p {
    font-size:1rem;
    line-height: 1.6rem;
    color:#4E4B66;
    margin:5px 0 26px 0;
}

.sistemas-div {
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    padding:30px 0;
}
.sistemas-div-left,.sistemas-div-right  {
    width:47%;
}

@media only screen and (max-width: 1160px) {
    .sistemas-div-left, .sistemas-div-right {
        width:100%;
    }

}


/* TODOS OS RÁDIOS DMR */
.cardRadio-container {
    display:grid;
    grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.cardRadio {
    background-color: var(--pure-white);
    border-radius:8px;
    box-sizing: border-box;
    display:grid;
    padding:15px 20px;
    grid-template-rows: [row-1] 30px [row-2] 70px  [row-3] auto;
    grid-template-columns: [col-1] auto [col-2] 90px;
    border:1px solid #D9DBE9;
}
.cardRadio h4 {
    margin:0;
    align-self: top;
    grid-column: 1 ;
    grid-row: 1;
    margin:0;
}
.cardRadio p {
    margin-top:0;
    font-size: 0.70rem;
    line-height:0.8rem;
    color:#7D7987;
    grid-column: 1 ;
    grid-row: 2;
    align-self: flex-start;
    padding-right: 5px;
}
.cardRadio h5 {
    color: var(--blue-stronger);
    margin:0;
    font-size:0.688rem;
    font-weight: 800;
    text-decoration: underline;
    cursor:pointer;
    grid-column: 1 ;
    grid-row: 3;
}
.div-radio {
    grid-column: 2 ;
    grid-row: 1/3;
    display:flex;
    justify-content: flex-end;
}
.div-radio2 {
    grid-column: 2 ;
    grid-row: 2/3;
}
.img-div-radio {
    height:100%;
    align-self: flex-end;
}
.img-div-radio2 {
    color: var(--blue-stronger);
    width:100%;
    align-self: flex-end;
}

@media only screen and (max-width: 1260px) { 
    .cardRadio p {
        line-height:1.2rem;
        padding-right: 0;
        padding-top:10px;
    }
    .cardRadio-container {
        grid-template-columns: repeat(2, 1fr); gap: 20px;
    }
}

@media only screen and (max-width: 800px) {
    .cardRadio-container {
        flex-direction: column;
    }
    .cardRadio{
        width:100%;
        margin-bottom: 15px;;
    }
    .cardRadio-container {
        grid-template-columns: repeat(1, 1fr);
    
    }
}