:root{
    --font-family: "Noto Sans", sans-serif;
    --font-weight: 400;
    --body-color: #001965;
    --color-1: #001965;
    --color-2: #eb6c1a;
    --color-3: #82b1f4;
    --color-4: #2f8a3b;
    --color-5: #f9bf1f;
    --color-6: #d3395e;
    --color-skin: #eda6be;
}

body{
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    color: var(--body-color);
}

.color-1{
    color: var(--color-1);
}

.color-2{
    color: var(--color-2);
}

.color-3{
    color: var(--color-3);
}

.color-4{
    color: var(--color-4);
}

.color-5{
    color: var(--color-5);
}

.color-6{
    color: var(--color-6);
}

.color-7{
    color: #2a908a;
}

.color-8{
    color: #89b8ef;
}

.color-skin{
    color: var(--color-skin);
}

.background-1{
    background-color: var(--color-1);
}

.background-2{
    background-color: var(--color-2);
}

.background-3{
    background-color: var(--color-3);
}

.background-4{
    background-color: var(--color-4);
}

.background-5{
    background-color: var(--color-5);
}

.background-6{
    background-color: var(--color-6);
}

.background-7{
    background-color: #2a908a;
}

.background-8{
    background-color: #89b8ef;
}

.background-skin{
    background-color: var(--color-skin);
}

a{
    color: var(--color-1);
}

a:hover, a.active{
    color: var(--color-2);
    text-decoration: none;
}

.text-small-gray{
    color: #666666;
    font-size: 80%;
}

.navbar .container-fluid, .header .container-fluid{
    max-width: 95%;
}

.navbar .navbar-nav .nav-item .nav-link{
    font-weight: 700;
    position: relative;    
    line-height: 1;
    text-align: center;
    font-size: 0.9rem;
}

.navbar .navbar-nav .nav-item:nth-child(even) .nav-link{
    color: #5f8dd6;
}

.navbar .navbar-nav .nav-item:nth-child(even) .nav-link:hover::after, .navbar .navbar-nav .nav-item:nth-child(even) .nav-link.active::after{
    content: "";
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: #5f8dd6;
    bottom: 0;
    left: 0;
}

.navbar .navbar-nav .nav-item:nth-child(odd) .nav-link{
    color: var(--color-skin);
}

.navbar .navbar-nav .nav-item:nth-child(odd) .nav-link:hover::after, .navbar .navbar-nav .nav-item:nth-child(odd) .nav-link.active::after{
    content: "";
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: var(--color-skin);
    bottom: 0;
    left: 0;
}

.apoio{
    font-size: 60%;
    color: #ffffff;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 500;
    margin-bottom: 1.5rem;
}

p{
    font-size: 1.2rem;
}

div[class^="square-"]{
    align-content: center;
    text-align: center;
    padding: 10px;
}

div[class^="square-"] > *{
    margin: 0;
}

.square-1{
    background-color: var(--color-skin);
}

.square-2{
    background-color: #5f8dd6;
}

.square-3{
    background-color: #e5553f;
}

div[class^="square-"] .hr-white{
    border-color: #ffffff;
    opacity: 1;
    margin: 15px auto;
}

div[class^="square-"] p{
    color: #ffffff;
    text-align: center;
    align-content: center;
}

ul.custom-icon, ul.custom-li {
    list-style: none; /* remove default bullets */
    padding-left: 0;  /* optional */
    width: fit-content;
    margin-inline: auto;
}

ul.custom-icon li{
    position: relative;
    padding: 15px 30px;
    padding-left: 42px;
}

ul.custom-li li{
    position: relative;
    padding: 15px 30px;
}

ul.custom-icon li::before {
    content: "";
    margin-right: 1rem;
    background: url("../img/ul-icon.svg") no-repeat;
    width: 30px;
    height: 21px;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
}

ul.custom-icon li:not(:last-child)::after, ul.custom-li li:not(:last-child)::after{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background-color:var(--color-skin);
    bottom: 0;
    left: 0;
}

.floating-element-no-square, .floating-element-no-square-left {
    background-color: var(--color-skin);
    padding: 30px;
    width: fit-content;
    margin-inline: auto;
}

.floating-element {
    background-color: #e5553f;
    padding: 30px;
    aspect-ratio: 1 / 1;
    width: fit-content;
    margin-inline: auto;
}

section#que-projeto-e-este, section#iniciativa, section#FAQs{
    position: relative;
}

section#que-projeto-e-este{
    z-index: 10;
}

.divider{
    border-color: #ffffff;
    opacity: 1;
    max-width: 90%;
    margin-inline: auto;
}

.divider-1{
    border-color: var(--color-1);
    opacity: 1;
}

.divider-2{
    border-color: var(--color-2);
    opacity: 1;
}

.divider-3{
    border-color: var(--color-3);
    opacity: 1;
}

.divider-4{
    border-color: var(--color-4);
    opacity: 1;
}

.divider-5{
    border-color: var(--color-5);
    opacity: 1;
}

.divider-6{
    border-color: var(--color-6);
    opacity: 1;
}

.cloud3-js{
    position: absolute;
    top: 4rem;
    left: 20%;
    z-index: 3;
}

.cloud6-js{
    position: absolute;
    top: 0;
    left: 5%;
    z-index: 3;
}

.elementos-3{
    margin-left: 0;
}

.navbar-toggler{
    color: var(--color-skin);
    border-color: var(--color-skin);
}

.navbar-toggler-icon{
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb%28237, 166, 190%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.offcanvas.offcanvas-end{
    width: 100%;
    border-left: none;
}

.offcanvas-header .btn-close{
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eda6be'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    opacity: 1;
}

/*.header{
    background: var(--color-skin) url("../img/casa.svg") no-repeat;
    background-size: 100%;
    background-position: center bottom;
    min-height: 45dvh;
}

.header .container-fluid, .header .container-fluid .position-relative{
    min-height: inherit;
}*/

.header{
    position: relative;
    z-index: 1;
}

.header h1{
    position: relative;
    z-index: 20;
    --font-size-scale: 3rem;
    animation: scaleUp 1s linear forwards;
}

@keyframes scaleUp {
    100% { font-size: var(--font-size-scale); }
}

.header .nuvem-branca {
    position: absolute;
    top: 5%;
    left: 70%;
    transform: translate(70%, 5%);
    z-index: 3;

    animation: cloudBob 14s ease-in-out infinite;
}

@keyframes cloudBob {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(calc(45% + -20px), calc(2% + -12px)); }
    50%  { transform: translate(0, -24px); }
    75%  { transform: translate(calc(45% + 20px,) calc(2% + -12px)); }
    100% { transform: translate(0, 0); }
}

.header .nuvem-laranja {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, 15%);
    z-index: 3;

    offset-path: path("M57.1,27.41c23.43,1.29,28.83-20.64,53-20,16.96.45,19.53,11.39,36,10,20.45-1.72,30.4-19.76,34-17,4.37,3.35-4.54,34.27-25,40-13.69,3.83-27.32-5.08-36.37-11C97.04,15.22,92.43-1.61,85.1.12c-8.55,2.03-2.49,25-17,47.29-14.48,22.25-40.94,30.7-43,28-2.07-2.71,18.06-19.79,15-24-2.89-3.98-21.55,10.36-33,3C1.61,50.89-.5,43.49.1,37.95c1.18-10.86,13.14-17.69,22-19.54,14.74-3.08,18.54,8.09,35,9Z");
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: cloudPath 65s linear infinite;
}

@keyframes cloudPath {
    0%   { offset-distance: 0%; }
    50% { offset-distance: 100%; }
    100% { offset-distance: 0%; } /* seamless loop back to start */
}

/* Fallback if offset-path unsupported */
@supports not (offset-path: path("M0,0 L10,10")) {
    .header .nuvem-laranja, .header .nuvem-azul { animation: cloudBob 16s ease-in-out infinite; } /* reuse from #1 */
}

.header .nuvem-azul {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translate(4%, 50%);
    z-index: 3;

    offset-path: path("M55.33,53.88c55.96-24.42,103.21-4.11,108-18,4.01-11.62-23.7-41.35-48-35-15.09,3.95-28.18,21.64-25,35,6.21,26.06,70.77,20.82,73.26,39,2.11,15.41-41.76,37.3-83.26,43-30.05,4.13-75.73,2.09-80-14-3.93-14.81,28.07-38.25,55-50Z");
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: cloudPath 120s linear infinite;
}

/*.header .container-fluid .position-relative{
    overflow: hidden;
}*/

.header .casa{
    position: relative;
    z-index: 2;
    max-width: 100%;
}

.header .arvore1 {
    position: absolute;
    bottom: 0;
    left: -3%;
    transform: translateY(40%);
    max-width: 12%;
    z-index: 3;
}

.header .banana {
    position: absolute;
    bottom: 0;
    left: 17%;
    transform: translate(17%, 70%);
    max-width: 10%;
    animation: slideUpInBanana 2s 1s ease-in forwards;
    z-index: 3;
}

.header .brocolo {
    position: absolute;
    bottom: 23%;
    left: 55%;
    transform: translate(-55%, 23%);
    max-width: 2%;
    animation: growIn 2s 2s ease-in forwards;
    z-index: 3;
}

.header .couve {
    position: absolute;
    bottom: 0%;
    right: 16%;
    transform: translate(16%, -50%);
    max-width: 15%;
    animation: slideUpIn 2s 2.5s ease-in forwards;
    z-index: 1;
}

.header .arvore2 {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(20%);
    max-width: 12%;
    z-index: 3;
}

.button{
    padding: 10px 30px;
    color: #ffffff;
    font-weight: 700;
    width: fit-content;
    margin-inline: auto;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

.button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: 0;
    transition: width 0.5s ease-in;
    transform-origin: left;
}

.button span { 
    position: relative;
    z-index: 1;
}

.button:not(:hover)::before {
    transition: width 0.5s ease-out, transform-origin 0s;
    transform-origin: right;
}

.button:hover::before {
    width: 100%;
}

.button:hover{
    cursor: pointer;
    color: #ffffff;
}

.button.bigger-padding{
    padding: 10px 50px;
}

.button.background-2::before{
    background-color: #2a908a;
}

.button.background-7::before{
    background-color: var(--color-2);
}

.title-big{
    font-size: 3.5rem;
}

@keyframes slideUpInBanana {
  from { transform: translate(17%, 70%); }
  to   { transform: translate(17%, 25%); }
}

@keyframes growIn {
    from { max-width: 2%; }
    to   { max-width: 20%; }
}

@keyframes slideUpIn {
  from { transform: translate(16%, -50%); }
  to   { transform: translate(16%, -125%); }
}

.col-icons:hover img,
.col-icons:hover img:focus-visible {
  animation: jiggle .7s ease-in-out infinite;
}

@keyframes jiggle {
  0%, 100% { transform: rotate(0) translateX(0); }
  20%      { transform: rotate(-3deg) translateX(-2px); }
  40%      { transform: rotate(3deg)  translateX(2px); }
  60%      { transform: rotate(-2deg) translateX(-1px); }
  80%      { transform: rotate(2deg)  translateX(1px); }
}

.accordion { 
    width: 100%;
    margin: 1rem auto;
}

.accordion .item {
    margin: .5rem 0;
    overflow: hidden;
}

.accordion .item input { 
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.accordion .label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    cursor: pointer;
}

.accordion .label span { 
    font-weight: 600;
    font-size: 1.2rem;
}

.accordion .chev { 
    width: 1rem;
    height: 1rem;
    border-right: 2px solid var(--color-skin);
    border-bottom: 2px solid var(--color-skin);
    transform: rotate(45deg);
    transition: transform .2s;
    flex: 0 0 5%;
}

.accordion .content {
    max-height: 0;
    overflow: hidden;
    transition: all .25s linear;
    padding: 0 1rem;    
    border-top: 1px solid var(--color-skin);
}

.accordion .content p{
    color: #808080;
    font-size: 1rem;
}

.accordion .content p:last-child{
    margin-bottom: 0;
}

.accordion input:checked ~ .content { 
    max-height: fit-content; 
    padding: 0 1rem .75rem 1rem;    
    border-top: 1px solid transparent;
}

.accordion input:checked ~ .label .chev { 
    transform: rotate(-135deg); 
}

.accordion ul.custom-icon{
    margin-inline: 0;
}

div.ul-list{
    background-color: #d8eefb;
}

ul.custom-menu{
    list-style-type: none;
    padding-left: 0;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 0;
}

ul.custom-menu li{
    display: inline-block;
    padding: 5px 30px;
    background-color: transparent;
    border-bottom: 2px solid #9dd4f4;
    margin-right: 15px;
    font-size: 1.2rem;
    transition: all 0.5 linear;
}

ul.custom-menu li.active, ul.custom-menu li:hover{
    background-color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

ul.custom-menu li:last-child{
    margin-right: 0;
}

.politicas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: fit-content;
}

.politicas > *{
    color: #ffffff;
}

.politicas span{
    display: none;
}

.mesDiv:nth-child(even){
    background-color: #eff8fd;
}

.mesDiv div{
    border-bottom: 1px solid var(--color-skin);
    padding-block: 5px;
}

.mesDiv div:last-child{
    border: none;
}

.customPopup .modal-header{
    border-bottom: 0;
    padding-bottom: 0;
    text-align: center;
}

.customPopup .modal-title{
    color: var(--color-1);
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    margin: 0 auto;
}

.customPopup .modal-header .btn-close{
    padding: 0;
    margin: 0;
    width: 1.5em;
    height: 1.5em;
    background: transparent var(--bs-btn-close-bg) center / 1.5em auto no-repeat;
}

.customPopup .modal-header .btn-close:hover{
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23001965'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    opacity: 1;
}

.customPopup .modal-content{
    border-radius: 0;
    border: none;
    --bs-modal-color: var(--color-1);
}

.customPopup .modal-footer{
    border: none;
}

.customPopup div#datas {
    max-height: 40dvh;
    overflow: auto;
}

@media screen and (min-width: 768px) {
    .title-big{
        font-size: 5rem;
    }

    div[class^="square-"]{
        aspect-ratio: 1 / 1;
    }

    .elementos-3{
        margin-left: 20%;
    }

    .floating-element-no-square, .floating-element{
        position: absolute;
        bottom:0;
        left:75%;
        transform: translate(-50%, 50%);
        z-index: 3;
    }

    .floating-element-no-square-left{
        position: absolute;
        bottom:0;
        left: 25%;
        transform: translate(-50%, 50%);
        z-index: 3;
    }

    .navbar .container-fluid, .header .container-fluid{
        max-width: 90%;
    }

    .header .nuvem-branca{
        top: 2%;
        left: 45%;
        transform: translate(45%, 2%);
    }

    .header .nuvem-laranja {
        right: 0%;
        transform: translate(25%, 15%);
    }

    .header .nuvem-azul {
        left: 18%;
        transform: translate(18%, 50%);
        animation: cloudPath 42s linear infinite;
    }

    .header h1{
        position: absolute;
        top: 0;
        left: 0;
        --font-size-scale: 5rem;
        z-index: 20;
    }

    ul.custom-icon.custom-width{
        max-width: 75%;
    }

    .politicas {
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }

    .accordion .chev{
        flex: initial;
    }

    .politicas span{
        display: initial;
    }

    .divider{
        max-width: 80%;
    }

    /*.header{
        background-size: 95%;
        min-height: 90dvh;
    }*/
}