/*--------------------- Navegação------------------------ */

/* ---------------------------Rodapé -------------------------*/
.footer{
    background-color: rgb(89, 89, 89);
    color: rgba(255, 255, 255, 0.836);
    font-family: 'Arvo', serif;
    padding: 20px 0px;
}

/* ---------------------------QUEM SOMOS -------------------------*/

.container-label{
    position: absolute;
    top: 45%;
    left: 9%;
    font-size: 3.3vw;
    font-weight: 500;
    color: snow;
    font-family: 'Arvo', serif;
}
.cont-icons{
    margin: 5px 15px;
    font-family: 'Arvo', serif;
    min-width: 260px;
}
.cont-icons h3{
    color: #ae0404;
}
.cont-icons article{
    font-size: 1.13rem;
}
.cont-icons img{
    margin-bottom: 15px;
}

.img-colab{
    transition: linear 0.65s;
    width: 150px;
    height: 150px;
}
.img-colab1{
    width: 150px;
    height: 150px;
}
.img-colab:hover{
    transform: scale(1.2);
}
.section-about{
    padding: 70px 100px;
    font-family: 'Arvo', serif;
}
.section-about h1{
    margin: 30px;
    color: #dd1b24;
}
.section-about article{
    font-size: 20px;
    min-width: 440px;
}
.cont-imgAbout img{
    box-shadow: 25px 25px 3px #b91222;
    width: 90%;
    height: auto;
    margin-top: 80px;
    min-width: 300px;
}

.trn-mission{
    font-size: larger;
    padding: 20px 0px;
    margin: 50px 0px;
    background-color:#b91222;
    color: snow;
    font-family: 'Arvo', serif;
}
.trn-mission h1{
    margin: 20px;
 }

.cont-info-res{
    margin: 120px 70px;
    font-family: 'Arvo', serif;
}
.subcont-numb{
    margin: 90px 40px;
}
.cont-info-res .col{
    padding: 0px 0px;
}
.cont-info-res h2{
    color: #dd1b24;
    margin: 0px 20px;
}
.cont-info-res p{
    color: black;
    margin: 0px 30px;
}

.barra-marcas{
    display: flex;
    min-height: 120px;
    max-height: 175px;
    height: 20vw;   
}
.container-brand{
    overflow: hidden;
    margin: auto;
}
.linha-marcas{
    display: flex;
    position: relative;
    min-width: fit-content;
}
.barra-marcas img{
    width: 10vw;
    height: auto;
    padding: 5px 15px;
    min-width: 150px;
    max-width: 200px;
}

/*-------------- IMAGENS DO TOPO DAS PÁGINAS --------------------*/

.container-img {
    position: relative;
    text-align: center;
    color: white;
    overflow: hidden;
    width: fit-content;
    height: auto;
    width: 100%;
}

.bar-bottom{
    position: absolute;
    bottom: -6px;
    width: 100%;
    left: 0px;
    height: 18%;
    max-height: 80px;

    animation: fallingBar;
    animation-duration: 2500ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0, 0.9, 1);

    -webkit-animation: fallingBar;
    -webkit-animation-duration: 2500ms;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-animation-timing-function: cubic-bezier(0.2, 0, 0.9, 1);
}

@keyframes fallingBar {
    0% {
        transform-origin: center right;
        -webkit-transform-origin: center right;
        -ms-transform-origin: center right;
        -moz-transform-origin: center right;
        -o-transform-origin: center right;

        -webkit-transform:rotateZ(90deg);
        -ms-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        -o-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    100% {
        transform-origin: center right;
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
  }
#iconPO{
    animation: appear;
    animation-duration: 650ms;
    animation-delay: 2500ms;
    animation-fill-mode: forwards;

    -webkit-animation: appear;
    -webkit-animation-duration: 650ms;
    -webkit-animation-delay: 2500ms;
    -webkit-animation-fill-mode: forwards;
}
@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.img-barbt{
    width: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 100%
}
#iconPO{
    opacity: 0;
    height: 80%;
}
#iconCC{
    height: 80%;
    transform: translateX(-3px);
}
.cont-logo-effect{
    z-index: 2;
    position: absolute;
    height: 55%;
    right: 5vw;
    bottom: 0px;
    width: 17%;
}
.bar-top{
    position: absolute;
    top: -10px;
    width: 100%;
    left: 0px;
    height: 18%;
    max-height: 80px;
    transform: rotateX(180deg);
    z-index: 3;
}

.img-pag{
    width: 100%; 
    max-height: 80vh;
    min-height: 210px;
}

.col-img{
    padding-left: 0px;
    padding-right: 0px;
}
.est-img{
    height: 100%;
    position: absolute;
    width: 60%;
}
.desenho{
    border-top: 70vw solid #920505a3;
    border-right: 40vw solid transparent;
    z-index: 1;
}
.label-shop{
    top: 29% !important;
    left: 3% !important;
}

/*------------------------- HOME --------------------*/
 .imagesHomeTop img{
    min-height: 200px;
    height: 46vw;
}
.carousel{
    width: 100% !important;
}
.labelImageHomeTop{
    position: absolute;
    width: 100%;
    top: 45%;
}
.labelImageHomeTop label{
    font-size: clamp(16px, 3vw, 50px);
    font-family: 'Arvo';
    font-weight: 600;
    color: white;
    max-width: 90%;
}

.blur-efHome{
    filter: blur(4px);
}
.card-adv{
    margin: 0px 30px;
}
.card-adv h3{
    color: #ee1d23;
    font-family: 'Arvo', serif;
}
.card-adv img{
    width: 110px;
    height: 110px;
}
.card-adv p{
    font-family: 'Arvo', serif;
    font-weight: bolder;
}
.title-home{
    margin: 60px 30px;
    margin-bottom: 0px;
}
.title-home h2{
    color: #ee1d23;
    font-family: 'Arvo', serif;
    font-size: 40px;
    margin-bottom: 10px;
}
.cont-aboutHome{
    margin: 110px 25px;
    font-family: 'Arvo', serif;
}
.cont-aboutHome img{
    width: 29vw;
    height: auto;
    max-width: 450px;
    min-width: 360px;
}

.cont-aboutHome h2{
    margin: 25px 0px;
    font-size: 37px;
    font-weight: bolder;
}
.cont-aboutHome h3{
    font-size: 25px;
    color: #dd1b24;
    border-bottom: #ee1d23 solid 2px;
    padding-bottom: 5px;
}
.cont-aboutHome li{
    font-size: 19px;
    padding: 10px;
}

.text-aboutHome{
    margin: 0px 30px;
    margin-top: 15px;
    font-family: 'Arvo', serif;
}
.text-aboutHome h6{
    color: #dd1b24;
    font-size: 15px;
    font-weight: bolder;
    margin-bottom: 20px;

}
.text-aboutHome p{
    font-size: 13px;
}
.text-aboutHome a{
    color: snow;
}
.text-aboutHome a:hover{
    color: #ae0404;
}

.serv-home a{
    color: snow;
}
.serv-home a:hover{
    color: #ae0404;
}
#bgr-serv-home{
    height: 140px !important;
}
.benefits-home{
    margin: 40px 0px;
}

#cardServConsult{
    background-image: url("../images/Consultoria.png");
}
#cardServTrein{
    background-image: url("../images/Treinamento.png");
}
#cardServHelp{
    background-image: url("../images/call-center.png");
}
#cardServAss{
    background-image: url("../images/Manutencao.png");
}
.card-servHome{
    background-size: cover;
    width: 17vw;
    height: 30vw;
    transition-duration: 1s;
    justify-content: center;
    align-items: center;
    color: #dd1b24;
    max-height: 470px;
    max-width: 300px;
    min-width: 245px !important;
    min-height: 329px !important;
}
.colCard-Serv{
    min-width: 245px !important;
    min-height: 329px !important;
}
.sobreCard{
    display: flex;
    width: 100%;
    justify-content: center;
    transform: skewY(-10deg) rotateY(29deg) rotateZ(8deg);
}
.card-servHome:before{
    content: '';
    background: #dd1b24;
    position: absolute;
    transform-origin: bottom;
    transform: skewX(45deg);
    top: -15px;
    width: 100%;
    height: 15px;
}
.card-servHome:after{
    content: '';
    position: absolute;
    background: #dd1b24;
    top: -15px;
    left: -15px;
    width: 15px;
    height: 100%;
    transform-origin: left;
    transform: skewY(45deg);
}
.card-servHome:hover{
    transform: skewY(10deg) rotateY(-29deg) rotateZ(-8deg) scale(1.15) translateX(50%);
    z-index: 5;
}
.central-iconHome{
    display: flex;
    width: 80px;
    height: 80px;
    margin-bottom: 0;
    padding: 15px;
    border-radius: 50px;
    background-color:#ee1d23;
    font-size: 30px;
    font-weight: 900;
}
.central-iconHome a{
    color: #fff !important;
    margin: auto;
}
#carTitles{
    color: snow;
    font-size: 55px;
    position: relative ;
    top: -50% ;
    display: flex ;
    font-family: 'Arvo', serif;
}

#seg1{
    background-image: url("../images/Shoppings/northjokeyfrente.jpg");
    background-position-x: center;
}

#seg3{
    background-image: url("../images/Hospitais/unimed.jpg");
    background-position-x: center;
}
#seg4{
    background-image: url("../images/Supermercados/saoluis.jpg");
    background-position-x: center;
}
#seg5{
    background-image: url("../images/OutrosSegmentos/castelao.jpg");
    background-position-x: left;
}
.intr-segHome{
    margin: 35px 5px;
    color: snow;
    font-size: 1.5rem;
    font-family: 'Arvo', serif;
    width: -webkit-fill-available;
}
.cont-tiCard{
    position: relative;
    display: flex;
    top: 40%;
    justify-content: center;
    color: snow;
    font-family: 'Arvo', serif;
    font-weight: bolder;
    text-shadow: 0px 0px 6px black;
}
.icon-segm{
    display: flex;
}
.titulo{
    position: absolute;
    transform: scale(1);
}
.titulo h4{
    font-size: 1.45rem;
}
.sub-titulo{
    position: absolute;
    transform: scale(0);
    transition: 0.5s ease;
    border: snow 1px solid;
    padding: 20px 10px;
    width: max-content;
    max-width: 100%;
    
}
.bgrCard{
    background-image: url("../images/background_segmentos.png");
    background-size: cover;
    padding: 40px 0px;
}
.card-segmHome{
    margin: 10px 20px;
    min-width: 275px;
    height: 400px;
    background-size: cover;
    color: #fff;
}
.card-segmHome:hover .titulo{
    transform: scale(0);
}
.card-segmHome:hover .sub-titulo{
    transform: scale(1);
}

.bgr-row{
    background-color: #ee1d23;
    margin: 50px 0px;
}

/* ---------------------------CONTATO -------------------------*/
.contact{
    color: rgb(105, 103, 103);
    padding: 0px 15px;
    margin: 30px 50px;
    font-family: 'Arvo', serif;
}
.contato h1{
    margin: 35px;
    margin-left: 0px;
}
.iconCont-modal{
    font-size: 5rem;
}
#iconPos-modalCont{
    color: green;
}
#iconNeg-modalCont{
    color: red;
}
.modal-contact{
    max-width: 70vw !important;
    justify-content: center;
    width: 55vw !important;
}
.row-contactModal{
    padding: 20px 10px;
    font-family: 'Arvo', serif;
}
.form-contact{
    min-width: 300px;
}

/*----------------------------- SEGMENTOS------------------------------*/
.label-cab{
    display: grid !important;
    margin: 70px 30px;
    font-family: 'Arvo', serif;
}
.label-cab h2{
    color: #dd1b24;
    margin: 15px 0px;
    font-size: 25px;
}
.cont-ind{
    margin-top: 100px;
    font-family: 'Arvo', serif;
}
.ind-bgr{
    background-color: #dd1b24;
    max-height: 280px;
    position: relative;
    bottom: 0px;
    display: flex;
    width: 100%;
    height: auto;
    max-height: fit-content;
}
.cont-infoBotton{
    margin: 80px 20px;
    font-family: 'Arvo', serif;
}
.cont-infoBotton h2{
    margin: 20px 15vw;
}
.cont-infoBotton h2{
    color: #dd1b24;
}
.cont-num{
    width: 30vw;
    background-color: white;
    margin-left: 10px;
    margin-right: 10px;
    color: #ee1d23;
    padding: 4px;
    padding-top: 10px;
    min-width: 230px;
    height: auto;
    transform: translateY(-30px);
    margin-top: 20px;

}
.cont-num h4{
    font-size: 35px;
    margin: 5px 0px;
}
.cont-num p{
    font-size: 15px;
}
.img-card{
    width: 60px;
    height: 60px;
}
.envelop{
    max-width: 1170px;
    margin-top: -50px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    display: flex;
}
.envelop-card{
    margin-top: 60px;
    max-width: 1170px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    display: flex;
}
.card-segm{
    margin: 0px 20px;
    height: 100%;
    min-width: 260px !important;
    max-width: 320px !important;
    margin-left: auto;
    margin-right: auto;
}
.colCard-Segm{
    margin-top: 20px;
}

.format-icon{
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-bottom: 0;
    padding: 15px;
    border-radius: 50px;
    background-color:#ee1d23;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    animation: infinite;
    transform: rotateY('180deg');
}
.format-icon:hover{
    animation: rotationIcon infinite 2.5s;
    animation-timing-function: linear;
}
.card-img-top{
    height: 180px !important;
}
@keyframes rotationIcon{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}
.segmCards{
    display: flex !important;
}
.segmCards .card-title{
    margin: auto;
}

/*---------------------- PRODUTOS & SERVIÇOS --------------------*/
.card-prodImg{
    height: 250px;
    width: auto !important;
    transition: 0.7s;
}
.card-prodImg:hover{
    transform: scale(1.1);
}
.card-prod{
    align-items: center;
    width: 14rem;
}

.cont-img-prod{
    margin:50px 0px
}
.card-text p{
    font-size: 14px;
}
.card-serv{
    align-items: center;
    border-radius: 30px;
    background-color: snow;
    width: 14rem;
    max-width: inherit;
    overflow: hidden;
}
.card-serv img{
    max-width: inherit;
    border-radius: 30px;
    height: 340px;
}
.cont-serv{
    margin: 60px 20px;
    padding: 30px 10px;
    font-family: 'Arvo', serif;
}
.text-serv{
    align-self: center;
    color: snow;
    font-size: 20px;
    margin: 5px 40px;
    min-width: 200px;
}

/* ---------------------em teste ------------ */
.miniature{
    width: 100%;
    height: 50px;
    margin: 5px 0px;
}
.miniature img{
    width: 30px;
    height: 75px;
    max-width: 55px;
}
.miniature img:hover{
    border:solid 1px #bd2130;
}
.imageModal{
    max-width: max-content;
    max-height: 80vh;
}
.modelzoom{
    align-items: center !important;
    background-color: transparent !important;
    border: none !important;
    transform: scale(1.2) !important;
}
/* .title-prod-pag{
    display: flex;
    align-items: center;
} */

/* .intr-prodI{
    padding: 50px 40px;
    background-color: rgba(136, 136, 136,0.5);
}
.intr-prodI h2{
    color: #dd1b24;
} */

.row-prodF{
    padding: 0px 13vw;
}
.about-prodI{
    font-family: 'Arvo', serif;
    color: gray;
    min-width: 300px;
}
.about-prodI p{
    padding: 0px 1.5vw;
    font-size: 1.11em;
}
.about-prodI h2{
    color:#dd1b24;
    font-size: 30px;
}
.about-prodI h3{
    font-size: 25px;
}

.icons-products{
    width: 5vw; 
    height: auto;
    min-width: 35px;
    max-width: 73px;
    font-size: clamp(35px, 5vw, 73px);
}
.cards-product{
    margin: 4vh 50px;
    display: flex;
    justify-content: center;
    padding: 10px 1vw;
}
.info-product{
    box-shadow: 0px 0px 10px lightgrey;
    padding: 25px;
    margin: 5px 8px;
    max-width: 540px !important;
    max-height: 400px !important;
    min-width: 300px;
}
.call-contact{
    background-color: #dd1b24;
    color: snow;
    height: 10vw;
    display: flex;
    align-items: center;
    margin-top: 30px;
    padding: 4vw;
    max-height: 20vw;
    min-height: 250px;
}
.call-contact h4{
    font-size: 1.25em;
    text-align: justify;
}

.col-prodF{
    padding: 5vw 0px;
}
.max-imgProd{
    max-width: 540px;
    max-height: 720px;
    min-height: 320px;
    min-width: 240px;
    width: auto;
}



/*--------------------- MODAL ----------------------------*/
#staticBackdrop img{
    width: 50%;
    height: auto;
    margin: 30px;
}
#staticBackdrop .modal-content{
    height: auto;
    max-height: 550px;
    font-family: 'Arvo', serif;
}
#staticBackdrop .modal-dialog{
    max-width: 800px !important;
}
#staticBackdrop .modal{
    padding-right: 0px !important;
}
.col-modalHome{
    min-width: 250px;
}
#staticBackdrop .modal-body{
    padding: 3rem !important;
    background-color: whitesmoke;
}
#staticBackdrop .modal-content h2{
    color: #b91222;
}
#staticBackdrop .modal-content p{
    color: #595959;
}