@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@1,700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    background-color: white;
    margin: 0px;
    position: relative;
    scroll-behavior: smooth;
    font-size:18px;

}



/* FINANCIAL */
.grafico-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px; height:600px;
    margin: 0 auto;padding-top:50px;
}

.grafico-wrapper {
    width: 600px; /* Define largura máxima do gráfico */
    height: 600px; /* Define altura máxima do gráfico */
}
ul#legenda li {
    margin-bottom:20px;
    display: flex    ;
    align-items: center;
}

ul#legenda li .legend-color-box {
    width: 40px;
    height: 40px;
    display: block;
    margin-right:10px;border-radius:100%;
}

ul#legenda  {
    text-transform: uppercase;
    font-size: 30px;
}

span.legend-percentage {
    width: 100px;
    text-align: right;
    padding-right: 10px;
}

li.legend-total {
    margin-left: 168px;
}


p {
    margin: 0px;
    font-size: 1em;
}

a {
    text-decoration: none; color:#5d43ff;

}

a:hover {
    color:#55BDEE;
}

.area-color a {
    color:#fff;
}

.bold {
    font-weight: bold;
}

.normal {
    font-weight: normal;
}



h2.area-title {
    font-size: 2em;
    text-align: center;
    margin: 0;
    line-height: 1;
}

.d-none  {display:none;}


.cover {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(42,33,81);
    background: linear-gradient(152deg, rgba(42,33,81,1) 0%, rgba(140,68,127,1) 70%, #c2678c 100%);
}

.cover-img {
    width:100%;
    max-width: 1200px;
    height: auto;
}

.next {
    position: absolute;
    bottom: 20px;
    color: white;
    text-decoration: none;
    font-size: 0;
    width: 40px;
    background-size: contain;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}




.title-link {
    font-weight: bold;
    color: #2a2251;
}

.title-link:hover {
    color: #55BDEE;
}

.section {
    width: 100%;
    box-sizing: border-box;padding:100px 50px;

}

.section-color {
    width: 100%;
    padding:50px;
    box-sizing: border-box;
    background: rgb(42,33,81);
    background: linear-gradient(152deg, rgba(42,33,81,1) 0%, rgba(140,68,127,1) 70%, #c2678c 100%);

}

.section-header {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

.flexbox {
    display: flex    ;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1300px;
    margin: 0 auto;
}


.txtwhite {color: white;}
.txtrose {color: #dabbe3;}
.txtblue {color: #55BDEE;}
.txtpurple {color: #2a2251;}
.txtpink { color: #efaece; }

.txtlight {font-weight: lighter;}


.footer {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background: rgb(42,33,81);
    background: linear-gradient(152deg, rgba(42,33,81,1) 0%, rgba(140,68,127,1) 80%, #a95786 100%);

    color: white;
    box-sizing: border-box;
    height: 50px;
    padding: 15px;
    margin: 0px;
    width: 100%;
    font-weight: lighter;
}


.footerlink {
    color: white;
}
.footerlink:hover {
    font-weight: normal;
    color: #55BDEE;
}


.menu {
    width: 200px;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: transparent;
}

.menuicon {
    width: 52px;
    height: 52px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #2f2353;position:fixed;z-index:10;
    top: 0;
    left: 0;
    background-size: 35px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}


.menulist {
    position: absolute;
    width:300px;
    height: 570px;
    display: none;
    background-color: transparent;list-style:none;margin:0;padding:0;
}

.menu:hover .menulist {
    display: block;
}

.menulist li{
    width: 100%;
    min-height: 50px;padding:5px;

    box-sizing: border-box;
    padding: 10px 15px;background-color: #2a2251;
}

.menulist li a {
    color:#fff;text-transform:uppercase; font-weight:500;
}

.menulist li:hover {
    background: #55BDEE;
}

ul.menulist li:first-child a {
    color:#e84888;
}

ul.menulist li:first-child {
  padding: 17px 0 15px 50px;
}

ul.menulist li:first-child:hover {
    background-color:#2a2251;
}


.team-card {
    text-align: center;
    vertical-align: middle;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;

}

.team-name {
    font-size: 21px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 5px;
    color: #2a2251;
}

.team-job {
    text-align: center;
    vertical-align: middle;
    color: #55BDEE;
    font-size: 16px;
}

.team-img {
    height: 280px;
    width: 280px;
}




/*AREAS*/

.area-text {
    font-size: 12pt;
    font-weight: normal;
}



.areas-deko-left {
    left: 0;
    top: 550px;
}

.areas-deko-right {
    position: absolute;
    right: 0;
}


.area-color {
    color: white;
    text-align: center;
    width: 100%;
    box-sizing: border-box;padding:50px 50px;

    display: block;
    background: rgb(42,33,81);
    background: linear-gradient(152deg, rgba(42,33,81,1) 0%, rgba(122,61,118,1) 43%, rgba(140,68,127,1) 53%, rgba(223,122,133,1) 100%);
}

.area-color p {
    font-weight:  400;
}

p {
    max-width: 1200px;
    margin: 0 auto 1em auto;

}
p:last-of-type {
margin-bottom:0;
}

.area-color h2 {
    max-width: 1024px;
    margin: 0 auto 1em auto;
}



.sub-area {
    color: #2a2251;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
    display: block;
}
.section-media {
    width: 100%;
    margin-top: 0px;
    box-sizing: border-box;
    margin-bottom: 30px;
    background-color: white;
}

.flexbox-media {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 30px;
    margin-top: 60px;
}

.media-cards {
    align-content: center;
    text-align: center;
    font-weight: normal;
}

.media-numbers {
    margin-bottom: 0;
    margin-top: -5px;
    color: #ffcce4;
    font-size: 20px;
    font-weight: 500;
}
.media-cards img {
    width: 50px;
}
.sub-text {
    color: white;
    text-align: center;
    font-size: 24px;
    font-weight: lighter;
}

.partners-template {
    align-content: space-around;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}


.media-img {
    height: 358px;
}

::-webkit-scrollbar {
    width: 12px; /* Define a largura da barra de rolagem */
    height: 12px; /* Para barras horizontais */ background:#fff
}




::-webkit-scrollbar-thumb {
    background: #65366e; /* Cor da barra */
}

::-webkit-scrollbar-thumb:hover {
    background: #e84888;
}





/* slider fixes */
.slides {
    display: flex; /* Coloca os itens em uma linha */
    overflow-x: auto; /* Ativa a rolagem horizontal */
    white-space: nowrap; /* Impede quebra de linha */

    scroll-behavior: smooth; /* Rolagem suave (opcional) */
}

.slides::-webkit-scrollbar {
    width: 12px; /* Define a largura da barra de rolagem */
    height: 12px; /* Para barras horizontais */ background:#82407a7d
}




.slides::-webkit-scrollbar-thumb {
    background: #55BDEE; /* Cor da barra */
}

.slides::-webkit-scrollbar-thumb:hover {
    background: #e84888;
}

.slides .media-img {
    width: 100%; /* Ajusta o tamanho das imagens */
    height: auto;
    margin-bottom:10px;
}
.slides {
    display: flex;
    overflow-x: auto;
    white-space: nowrap; /* Mantém o comportamento do carrossel */
    gap: 25px;
    scroll-behavior: smooth;
}

.slides > div {
    flex-shrink: 0;
    max-width: 40%;
}

.slides div {
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
    width: 90%;
    line-height: 1.5;
    position: relative;
    display: block;
}

.slides p {
    position: absolute;
    bottom: 30px;
    left: 10px;
    right: 10px;
    color: #0b0c4c;
    background-color: #fff;
    padding: 10px;
    margin: 0;
    width: auto;
    max-width: 40%;
    font-size: 15px;
    display: inline-table;
    line-height: 1.2;
    border: 2px solid #55bdee;
}




.horizontal-card {

    width: 500px;

    margin: 30px;
    text-align: left;
    color: #2a2251;
    font-weight: lighter;

}





.partners-img	 {
    height: 280px;
    width: 280px;
}

.message {
    width: 100%;
    box-sizing: border-box;padding:50px;
    padding-bottom:0;
}


.message-box {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

@media screen and (max-width: 1000px) {
    .message-box {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
}

.message-card {
    vertical-align: middle;
    padding:50px;
    color: #2a2251;
    font-size: 1.1em;text-align:center;
}

.section-projects {
    width: 100%;
    margin-top: 0px;
    box-sizing: border-box;
}

.project-template {
    display: flex    ;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1366px;
    justify-content: space-around;padding:100px 0;
}


.project-card {
    width: 560px;  color: #2a2251;margin-bottom:50px;
}

.project-card p{
   margin:0;
}

.project-card:last-of-type {
    margin-bottom:0;

}

.project-card a {
    font-weight:500;
    color:#2a2251;
}



.project-card  h3 {    color: #2a2251; font-weight: 500;    margin: 20px 0 0 0;font-size:1em;}

.project-card a h3:hover, .project-card a:hover{
    color:#55BDEE;
}

    .third-card {
        text-align: center;
        width: 375px;
        margin-top: 40px;
        margin-bottom: 20px;
        margin-left: 30px;
        margin-right: 30px;
    }

    .third-img {
        width: 100%;
    }

    .project-text {
        margin-top: 20px;
        font-size: 12pt;
        text-align: left;
        color: #2a2251;
        font-weight: lighter;
    }

    .project-title {
        margin-top: 20px;
        font-size: 12pt;
        text-align: center;
        color: #2a2251;
        font-weight: bold;
    }

    .project-img	 {
        width: 100%;
    }




    .project-link {
        text-decoration: none;
        font-weight: normal;
        color: #2a2251;

    }

    .project-link:hover {
        color: #efaece;
    }




    /*NETWORK*/

    .section-network {
        width: 100%;
        margin-top: 0px;
        margin-bottom: 20px;
        padding: 0px;
    }

    h2.network-header {
        text-align: center;
        font-size: 2.5em;margin:0;padding:0;
    }

    .network-template {
        display: inline-flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        list-style: none;
        margin: 0 auto;;max-width:1350px;
    }

    ul.network-template li {
        display: flex;
        border: 2px solid #55bdee;
        align-items: center;
        justify-content: center;
        width: calc(21% - 10px);
        margin: 10px;
        padding: 20px;
    }

    ul.network-template a:hover {
        color: #55bdee;
    }

    ul.network-template li, ul.network-template li a {color:#fff;font-weight:bold;font-size:20px;}

    ul.network-template {
        margin: 0;
        padding: 0;
    }

    /*EVENTS*/

    .section-events {
        width: 100%;
        margin-top: 0px;
        margin: 0px;
        padding: 0px;
    }

    .events-template {
        align-content: space-around;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }


    .events-card {
        box-sizing: border-box;
        text-align: center;
        vertical-align: middle;
        width: 300px;
        border-width: 2px;
        border-style: solid;
        border-color: #55BDEE;
        margin: 30px;
        padding: 20px;

    }


    .events-text {
        font-size: 14pt;
        text-align: left;
        color: #4b3a90;
        font-weight: lighter;
    }


    @media screen and (max-width: 1024px) {


        .slides > div {
            flex-shrink: 0;
            max-width: 90%;
        }
    .project-card {
        margin: 0 auto 50px auto;

    }
    .grafico-container {    height: 350px;}


    ul#legenda {   font-size: 20px;   }

    ul#legenda li .legend-color-box {
        width: 30px;
        height: 30px;}

        ul#legenda li {
            margin-bottom: 10px;}
    }

    @media screen and (max-width: 768px) {

        .grafico-container {
            display: flex
            ;
            gap: 100px;
            height: auto;
            margin: 0 auto;
            padding-top: 50px;
            flex-direction: column;
        }

        ul#legenda {

            font-size: 20px;
            font-weight: 400;
        }
        li.legend-total {
            margin-left: 118px;
        }
        span.legend-percentage {
            width: 50px;
        }
        h2.area-title {		font-size: 2em;}
        .media-cards img {
            width: 50px;
        }
        .section-projects  {padding:0;}

        .media-numbers {
            margin-bottom: 10px;
            margin-top: -10px;
            color: #ffcce4;
            font-size: 30px;
            font-weight: 500;
        }

        .message-card {padding:25px;}

        .area-color, .message, .section {

            padding: 30px;
        }

        ul.network-template li {
            width: 100%;
            margin: 10px;
            padding: 20px;
        }

        .slides > div {

            max-width: 80%;
        }

        .media-cards {

            width: 50%;
        }

        .project-card {
            padding: 0;
            margin: 0 auto 50px auto;padding:25px;
        }
        .project-card p{
            margin-bottom:0;
        }
    }