body {
    margin: 0;
    /*font-family: Montserrat, sans-serif;*/

    font-family: "Slabo 13px", serif;
    font-weight: 400;
    font-style: normal;

    font-style: normal;
    overflow-x: hidden;
    background-image: url('../images/white-abstract1.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 100vh; /* Ou ajuste conforme necessário */
    width: 100%;
}

.title{color:#1f206a}
.subtitle{color:#015d86}

.font1-25{font-size: 1.25rem}


.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}
.mt4{margin-top:4rem !important;}


.pt-2{padding-top:2rem !important;}
.pt-4{padding-top:4rem !important;}
.pt-5{padding-top:5rem !important;}
.pt-6{padding-top:6rem !important;}

.mb-2{padding-bottom:2rem !important;}
.mb-4{padding-bottom:4rem !important;}
.mb-7{padding-bottom:7rem !important;}



.my-4{padding:4rem 0}

.white{color:#fff}
.green-light{color:#fff}
.green-dark{color:#fff}
.grey{color:#969494}
.blue-light{color:#01a0be }
.blue-dark{color:#005e85 }

.bg-white{background-color:#fff}
.bg-green-light{background-color:#fff}
.bg-green-dark{background-color:#fff}
.bg-grey{background-color:#969494}
.bg-blue-light{background-color:#01a0be}
.bg-blue-dark{background-color:#005e85}
.bg-white{background-color:#fff}

.btn-primary{background-color:#005e85; color: white}
.btn-primary:hover{background-color: #1f7ea6; color: white}

.gradient-bg-white-grey {background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);}

.border-top-blue{border-top:1px solid #01a0be}
.border-top-grey{border-top:1px solid #ccc}

.no-shadow{box-shadow:none !important;}

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    padding: 100px 0;
    background: #f0f4f8;
}

.hero img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hero h1 {
    font-size: 3rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

.hero .btn {
    background: #3498db;
    color: white;
    padding: 10px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.hero .btn:hover {
    background: #2980b9;
    transform: translateY(-3px);
}

/* Seções com Layout de Blocos */
.section {
    padding: 80px 0;
}

.section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 20px;
}

.section p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.section img {
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.section .btn {
    background: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.section .btn:hover {
    background: #2980b9;
    transform: translateY(-3px);
}

/* Carrossel Vertical */
.vertical-carousel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vertical-carousel img {
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Cores de Destaque */
.highlight {
    color: #3498db;
}











.linha-centralizada {
    width: 80%;
    height: 2px;
    background-color: #01a0be;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

/*Icons */
.social-icons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

.social-icon {
    color: #fff;
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: #0077b5; /* LinkedIn */
}

.social-icon:hover.fa-instagram {
    color: #e4405f; /* Instagram */
}

.social-icon:hover.fa-facebook {
    color: #1877f2; /* Facebook */
}
/*fim icons */


/* menu */
.menu-items {
    display: flex;
    gap: 15px;
    padding: 10px;
    position: relative;
}

.menu-items a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.menu-items .has-submenu > a::after {
    content: "▼";
    font-size: 12px;
    transition: transform 0.3s ease;
}

.has-submenu:hover > a::after {
    transform: rotate(180deg);
}

.has-submenu {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    background: #015d86;
    top: 100%; /* Alinha abaixo do item do menu */
    left: 0;
    min-width: 180px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-radius: 5px;
}

.has-submenu:hover .submenu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.submenu a {
    display: block;
    padding: 10px;
    white-space: nowrap;
    transition: background 0.3s ease;
}

.submenu a:hover {
    background: #127ba6;
}

.hamburger-menu {
    display: none;
    font-size: 24px;
    cursor: pointer;
    background: #005e85;
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 5px 20px;
    z-index: 999;
    border-bottom: 2px solid #01a0be;
}
.mobile-menu {
    padding-top: 1.2rem;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(1, 93, 134, 0.9);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.mobile-menu a {
    color: white;
    font-size: 20px;
    text-decoration: none;
    margin: 7px 0;
}
.mobile-menu.show {
    display: flex;
}

.menu-contato{
    color: #015d86 !important;
    background: white;
    height: 28px;
    border-radius: 12px;
    margin-top: 5px !important;
}


/* fim menu */
.carousel-img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* igual à altura do .carousel-item img */
}
.carousel-inner {
    height: 365px;
}
.carousel-img {
    height: 100%;
    object-fit: cover;

}

.carousel-item img {
    /*height: 85vh;*/
    height: 365px;
    object-fit: cover;
    margin-top: 65px;
}
.text-carousel{
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    text-align: center;
    color: #015d86;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 5px;
    width: 80%;
}
.text-carousel a{color: #015d86;}

.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
    height: 500px;
    width: 100%;
}

.parallax2 {
    background-image: url('../images/white-abstract1.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
    height: 500px;
    width: 100%;
}

#parallax9{
    height: 1000px !important;
}
.parallax3{
    background-image: url('../images/paralax3.jpg');
    background-size: cover;
    background-position: center top !important;
    background-attachment: fixed;
}


.parallax-only-image {
    height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;

}

/* Altura dinâmica para parallax com conteúdo */
.parallax-with-content {
    background-attachment: scroll;
    background-size: cover;
    background-position: center top;
}

.section-content {
    padding: 80px 20px 20px;
    text-align: center;
}

.content-1{background: #015d86; color: #ffffff}
.content-2{height: 600px}
.custom-box-floating {
    margin-top: -70px;
    text-align: end;
    display: flex;
    gap: 4rem;
    width: 980px;
    left: 50%;
    margin-left: -490px;
    padding: 30px 20px;
    background-color: white;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border: 2px solid transparent;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, .6));
}
.custom-box-floating h2{
    color: #015d86;
    font-size: 3rem;
}
.floating-to-up{
    margin-top: -150px !important;
    width: 1600px !important;
    margin-left: -800px !important;
}


header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #015d86;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 0;
    color: white;
    transition: transform 0.3s ease;
}
.hidden-header {
    transform: translateY(-100%);
}
.logo{width: 385px; height: 80px;}



.sec-abount{margin-bottom: 4rem}
.sec-abount .pass-by-pass img{
    max-width: 820px;
}

.sec-abount .passos-container {
    display: flex;
    justify-content: space-between; /* Distribui as colunas igualmente */
    align-items: stretch;
    gap: 20px; /* Espaçamento entre colunas */
    padding: 20px;
}

.sec-abount  .passo {
    flex: 1; /* Cada coluna ocupa o mesmo espaço */
    background: #f5f5f5; /* Fundo sutil */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Mantém o título e texto alinhados corretamente */
    justify-content: space-between; /* Distribui os elementos verticalmente */
}
.sec-abount .passo span {
    display: block; /* Faz o número ocupar uma linha separada */
    font-size: 24px;
    font-weight: bold;
    color: #003366; /* Azul escuro */
    margin-bottom: 10px;
}

.sec-abount  .passo h3 {
    color: #003366; /* Azul escuro */
    font-size: 18px;
    margin-bottom: 10px;
}

.sec-abount .passo p {
    font-size: 14px;
    color: #333;
}






.card-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
}

.card {
    width: 30%;
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 250px;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.card-front {
    background-color: #01a0be;
    color: white;
}

.card-back {
    background-color: #005e85; /* Verde mais escuro */
    color: white;
    transform: rotateY(180deg);
}

.card h3 {
    margin: 0 0 1rem 0;
}

.card p {
    text-align: justify;
    font-size: 1rem;
    line-height: 1.4;
}

/* Efeito de rolagem (fade in) */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s, transform 0.5s;
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}


.text-dark-blue {
    color: #1f206a;
}
span {
    display: inline-block;
}

.text-blue {
    color: #3089ed;
}
.blog-heading {
    font-size: 46px;
    font-weight: bold;
    text-transform: uppercase;
}

.blog-des {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #202020;
    padding: 20px 0 50px 0;
    line-height: 1.4;
}

.btn.btn-blue {
    background: #3089ed;
    border-color: #3089ed;
    padding: 11px 38px;
    color: #ffffff;
    transition: .8s ease;
    position: relative;
    overflow: hidden;
}
.portfolio-sec .portfolio-heading {
    margin-bottom: 0;
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}


.portfolio-heading {
    font-size: 2.5rem;
    color: #1a73e8;
    text-align: left;
    margin-bottom: 2rem;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


.col {
    flex: 1 1 calc(50% - 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}

.image-wrapper img {
    border: 1px solid  #1f206a;
    width: 90%;
    height: auto;
    transition: transform 0.3s ease;
    margin: 0 0 ;

}

.image-wrapper:hover img {
    transform: scale(1.1);
}

.hover-text {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem;
    text-align: center;
    border-radius: 5px;
    transition: opacity 0.3s ease;
    opacity: 1;
    width: 90%;
}

.image-wrapper:hover .hover-text {
    opacity: 1;
}

.hover-text h4 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}



.btn.btn-darkblue {
    background: #005e85;
    border-color: #005e85;
    padding: 11px 35px;
    color: #ffffff;
}
/*.btn {
    -webkit-appearance: initial;
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    display: inline-block;
    font-size: 18px;
    border: 2px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    letter-spacing: .5px;
    line-height: inherit;
    border-radius: 0;
    text-transform: capitalize;
    width: auto;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease !important;
    transition: all .5s ease !important;
}*/





.feature-heading {
    font-size: 36px;
    font-weight: 500;
    color: #ffffff;
    padding: 0 0 35px 0;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px #222;
}
.feature-area p {
    margin-bottom: 40px !important;
    color: #fff;
}
.feature-image {
    background-image: url("../images/mapa.png");
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    border-top: 4px solid #01a0be;
    border-bottom: 4px solid #01a0be;
    color: #000000;
    padding: 5.5rem 0;
}
.feature-image .logo-sisen-parceiros{
    width: 290px;
    height: auto;
}
.feature-image  .bt-logo-sisen{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 3rem;
}

.feature-image  .bt-logo-sisen div{
    flex: 1;
    text-align: start;
}




.border-top-custom {
    border-top: 6px solid;
    border-image: linear-gradient(to right, #57c5c2, #05aaa4, #969494, #005e85, #01a0be);
    border-image-slice: 1;
}

.about-sec{height: 800px}
.div-left {
    max-width: 800px;
    flex-shrink: 0;
    /*display: flex;
    flex-direction: column;
    gap: 20px;*/
    padding-right: 10px;
    text-align: center;
}
.div-right {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: left;
}
.about-sec .cover {
    padding: 16px 25px 20px;
    cursor: pointer;
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
    text-align: left;
}
.about-sec .card {
    display: inline-block;
    background-color: transparent;
    border: 0 solid rgba(0, 0, 0, .125);
}
.about-sec .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
}
.about-sec .cover .card-title {
    margin-bottom: 16px;
    font-size: 1.5rem;
    font-weight: normal;
    color: #01a0be;
    -webkit-transition: 0.9s ease;
    -o-transition: 0.9s ease;
    transition: 0.9s ease;
    text-transform: uppercase;
}
.about-sec .cover .card-text {
    font-size: 15px;
    font-weight: 400;
    color: #000000;
    font-family: 'Roboto', sans-serif;
}
.about-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translate(42%, -50%);
}
.about-sec .numbering {
    font-size: 2.5rem;
    color: #005e85;
    font-weight: 400;
    transition: all 1.2s;
    font-family: "Roboto", sans-serif;
}
.about-image img {
    max-width: 600px !important;
    margin-left: -78px;
    margin-top: 900px;
}

.about-sec h2 {
    margin-top: 7rem;
    font-size: 3rem;
}
.blue-medium {
    color: #005e85 !important;
}


.image-page-top{width:100%; height: auto; margin-bottom: 4em;}


.bannerStart {
    position: fixed;
    bottom: 5%;
    right: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.9);
    width: 367px;
    height: 549px;
    border-radius: 10px;
}

.bannerStart .banner-content {
    position: relative;
    padding: 0;
    text-align: right;
    border-radius: 10px;
    width: 367px;
    height: 549px;
    overflow: hidden;
}

.bannerStart .banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.bannerStart .close-banner {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background: white;
    color: black;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    z-index: 1;
}





#page-sisen{}.text-overlay {
    position: absolute;
    color: white;
    top: 100px;
    left: 20px;
    max-width: 700px;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 5px;
}
#page-sisen .border-l-r{border-top: 2px solid #01a0be; border-bottom: 2px solid #01a0be;}

.text-overlay-solucoes{
    position: absolute;
    color: #015d86;
    max-width: 700px;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
}


.solucoes .img-passos{
    max-width: 720px;
    height: auto;
}

.solucoes .passos-container, .solucoes .passos-container2 {
    display: flex;

    align-items: stretch;
    gap: 20px;
    padding: 20px;
}
.solucoes .passos-container2{
    padding: 0;
    margin-top:-40px
}

.solucoes .btn-passos{
    margin-top: 12rem;
    display: block;
    position: absolute;
}

.solucoes .passo {
    flex: 1; /* Cada coluna ocupa o mesmo espaço */
    background: #f5f5f5; /* Fundo sutil */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Mantém o título e texto alinhados corretamente */
    justify-content: space-between; /* Distribui os elementos verticalmente */
}
.solucoes .passo span {
    display: block; /* Faz o número ocupar uma linha separada */
    font-size: 24px;
    font-weight: bold;
    color: #003366; /* Azul escuro */
    margin-bottom: 10px;
}

.solucoes  .passo h3 {
    color: #003366; /* Azul escuro */
    font-size: 18px;
    margin-bottom: 10px;
}

.solucoes .passo p {
    font-size: 14px;
    color: #333;
}

.banner-pg-solucoes{
    width: 100%;
    height: 400px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.pg-sisen .banner-pg-solucoes {
    background-image: url('../images/QUEM_SOMOS.jpg');
}

.solucao-customizada .banner-pg-solucoes {
    background-image: url('../images/COSTUMIZADO.jpg');
}

.solucao-paex .banner-pg-solucoes {
    background-image: url('../images/PAEX.jpg');
}

.solucao-pan .banner-pg-solucoes {
    background-image: url('../images/PAN.jpg');
}

.solucao-pda .banner-pg-solucoes {
    background-image: url('../images/PDA.jpg');
}

.solucao-gestor .banner-pg-solucoes {
    background-image: url('../images/gestor.jpg');
}


#page-solucaoPan .custom-card {
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    min-height: 300px;
    width: 100%;
}
#page-solucaoPan .custom-card:hover {
    transform: scale(1.05);
}
#page-solucaoPan .custom-btn {
    border-radius: 50px; width: 200px;
}
.solucoes .card{
    width: auto !important;
    height: 350px;
}

.solucoes .card .corrigi-espaco{
    margin-top: 44px;
}

#page-solucaoPan .mentoring-step {
    display: flex;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

#page-solucaoPan .mentoring-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 4px solid;
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

#page-solucaoPan .mentoring-box .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

#page-solucaoPan .mentoring-box h4 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

#page-solucaoPan .mentoring-box p, .mentoring-box ul {
    text-align: center;
}

#page-solucaoPan .mentoring-box ul {
    margin-bottom: 0;
    padding-left: 1rem;
    list-style-type: none;
}

#page-solucaoPan .mentoring-box.border-primary {
    border-color: #007bff;
}

#page-solucaoPan .mentoring-box.border-warning {
    border-color: #ffc107;
}

#page-solucaoPan .mentoring-box.border-success {
    border-color: #28a745;
}

#page-solucaoPan .mentoring-box.border-danger {
    border-color: #dc3545;
}

#page-solucaoPan .parallax-section {
    position: relative;
    background-image: url('../images/bg-pan-black.jpg'); /* Substitua pelo caminho correto da sua imagem */
    background-size: cover; /* Para cobrir toda a área */
    background-attachment: fixed; /* A imagem ficará fixa quando o usuário rolar */
    background-position: center; /* Para centralizar a imagem */
    height: 350px; /* Definindo altura da seção para ocupar 100% da altura da janela */
    color: white; /* Definindo a cor do texto (ajuste conforme necessário) */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#page-solucaoPan .parallax-section .container {
    z-index: 1;
    position: relative;
    color: white;
    padding: 20px;
}

#page-paraVoceGestor .flutuante {
    /*height: 260px;*/
    display: block;
    margin-top: -120px;
    position: relative;
    background: #fff;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border: 2px solid transparent;
    font-size: 2.25rem;
    /*padding: 2rem;*/
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, .6));
    text-align: center;
}



#page-paraVoceGestor .img-pra-gestor{
    max-width: 460px;
    height: auto;
}

#page-paraVoceGestor .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    padding: 100px 0;
    background: #f0f4f8;
    margin-top: -200px;
    height: 250px;
}

#page-paraVoceGestor .hero img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#page-paraVoceGestor .hero h1 {
    font-size: 3rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 20px;
}

#page-paraVoceGestor .hero p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

#page-paraVoceGestor .hero .btn {
    background: #3498db;
    color: white;
    padding: 10px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

#page-paraVoceGestor .hero .btn:hover {
    background: #2980b9;
    transform: translateY(-3px);
}





#page-caseSucesso .partner-logo {max-width:200px; overflow: hidden;border-radius: 10px;transition: transform 0.3s ease;}
#page-caseSucesso .partner-logo img {max-width: 178px ;width: 100%;height: auto;transition: transform 0.3s ease}
#page-caseSucesso .partner-logo:hover img {transform: scale(1.1)}


#page-contact .background-contact{    width: 100%;
    max-height: 300px;
    height: 100vh;
    background-image: url('../images/bg-contact.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;}
#page-contact h1{color:#1f206a}
#page-contact h4{color:#015d86}
#page-contact .form-contact{margin: 4rem 0}
#page-contact  .bar{border-left: 1px solid #ccc;margin-left: 4rem;}

#page-blog .list-posts{margin-top: 2rem}
#page-blog .card-blog{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0 0 20px 0;
    text-align: center;
    margin-bottom: 6rem;
    height: 430px;
}
#page-blog .card-title{color: #1E243A; margin: 1rem}
#page-blog .card-text{padding: 0 1.25rem}
#page-blog .card-img-top{
    display: block;
    width: 100%;
    height: 200px;
}
#page-blog .bt-saiba-mais{background-color: #015d86;color: #FFF;font-size: 0.75rem}
#page-blog .bt-saiba-mais:hover{background-color: #16739d;}


#map {
    height: 500px; /* Altura do mapa */
    width: 100%;   /* Largura total */
}




.blog-image img{width: 500px}

.whatsapp-float{
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
}
.whatsapp-float img{filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5)); transition: transform 0.3s ease-in-out; width: 50px; height:auto; cursor: pointer}
.whatsapp-float img:hover{transform: scale(1.2);}


.footer {
    padding: 3rem 0 0;
    color: #fff;
    background-color: #015d86;
    border-top: 6px solid #01a0be;
}
.footer .container-footer{
    max-width: 1200px; margin: auto; display: grid; grid-template-columns: 220px auto auto auto; gap: 20px;
}
.footer a{ color: #fff; text-decoration: none; display: block; margin-bottom: 8px;}
.footer .links-contact li{margin-bottom: 1rem; }
.footer .links-contact li i{margin-right: 8px; color: white}

.footer .list-social-media{
    display: flex;
    justify-content: left;
    gap: 2rem;
    padding-top: 1rem;
    margin-bottom: 2rem;
}
.footer-bottom {
    background-color: #015d86;
    height: 100px;
    border-top: 1px solid #fff;
    padding-top: 18px;
    margin-top: 28px;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.footer .image-rio-de-janeiro-linha{
    position: sticky;
    bottom: 0;
    width: 300px;
    left: 100%;
    margin-top: -30px;
}

.pg-login{background-color: #015d86}


/* reservado */

.a-lista-noticia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.a-container{margin-top: 3rem; margin-bottom: 5rem}
.a-space-form{margin-bottom: 1.5rem}
.a-icon a, .a-icon{color: #aaa !important}
.a-img-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a-img-container img {
    height: auto;
    width: auto;
    max-width: none;
}


@media (max-width: 768px) {
    #header{display: none}

    .hamburger-menu {
        display: block;
        cursor: pointer;
    }
    .menu-items {
        display: none;
    }

    .parallax {
        background-attachment: scroll; /* Evitar problemas em dispositivos m?veis */
    }

    .portfolio-heading{text-align: center; margin-bottom: 4rem;}
    .image-wrapper{margin:1rem 0}
    .feature-image{background-image: none}
    .sec-abount .passos-container {
        flex-direction: column; /* Empilhar os elementos no mobile */
        align-items: center; /* Opcional, para centralizar os itens */
    }

    .sec-abount .passo {
        width: 100%; /* Opcional, para ocupar toda a largura */
        max-width: 400px; /* Definir um limite de largura */
    }

    .footer .container-footer {
        grid-template-columns: 1fr; /* Uma única coluna */
        gap: 10px;
        text-align: center; /* Opcional, para centralizar o conteúdo */
    }

    .custom-box-floating {
        margin-top: -50px;
        gap: 4rem;
        width: auto;
        left: 0;
        margin-left: 0;
        padding: 0;
        box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, .6));
    }

    .div-right{display: none}
    #parallax9 {
        height: 1200px !important;
    }
}

@media (max-width: 450px) {
    .sec-abount .pass-by-pass img{width: 380px; margin-left: -30px;}
    .passo {
        width: 100%;
        margin-bottom: 20px;
    }
    .solucoes .img-cut{max-width: 100%}
    .solucoes .img-passos{max-width: 380px; margin-left: -30px;}
    .image-rio-de-janeiro-linha{display: none}
    .solucoes .passos-container, .solucoes .passos-container2 {display: block;}
    .footer .list-social-media{justify-content: center;}
}

@media (max-width: 480px) {
    .carousel-item img{height: 210px; width: 100% !important;margin-top: 10px;}
    .carousel-inner {
        height: 260px;
    }
    .feature-image .logo-sisen-parceiros{display: none}
    .bannerStart {
        width: 290px;
        height: 434px;
    }
    .banner-pg-solucoes{height: 290px;}


}