@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');



/*----------------------------------------------- override */

@keyframes fade-toleft{
    0%{ transform:translateX(50px); }
    100%{ transform:translateX(0px); }
}

.a-fade-toleft{ animation: fade-toleft 1s forwards; }

/*----------------------------------------------- override */
:root {
    --color-01: #9da423;
    --color-02: #C2D12F;
    --color-03: #000;
    --color-04: #20964a;
    --color-05: #ef771b;
    --color-06: #50bec9;
    --color-07: #e62155;
    /*--color-08: #ffcc00;*/
    --color-08: #00a195;
    --color-09: #fbb91c;
    --color-10: #1eb1e7;
    --color-white: #fff;
    --color-gray-01: #f1f4f5;
    --color-gray-02: #dae0e2;
    --color-gray-03: #cbd0d1;
    --color-gray-04: #adb3b4;
    --color-gray-05: #838788;
    --color-gray-06: #636768;
    --color-gray-07: #4f5353;
    --color-gray-08: #3a3d3d;
    --color-black: #000;
    --intense-border: 35%;
    --weak-border: 4.38vw;
}

.color-01       { color: var(--color-01) !important; }
.color-02       { color: var(--color-02) !important; } 
.color-03       { color: var(--color-03) !important; } 
.color-04       { color: var(--color-04) !important; }
.color-05       { color: var(--color-05) !important; }
.color-06       { color: var(--color-06) !important; }
.color-07       { color: var(--color-07) !important; }
.color-08       { color: var(--color-08) !important; }


.color-white    { color: var(--color-white) !important; }
.color-gray-01  { color: var(--color-gray-01) !important; }
.color-gray-02  { color: var(--color-gray-02) !important; }
.color-gray-03  { color: var(--color-gray-03) !important; }
.color-gray-04  { color: var(--color-gray-04) !important; }
.color-gray-05  { color: var(--color-gray-05) !important; }
.color-gray-06  { color: var(--color-gray-06) !important; }
.color-gray-07  { color: var(--color-gray-07) !important; }
.color-gray-08  { color: var(--color-gray-08) !important; }
.color-black    { color: var(--color-black) !important; }

.bg-color-01    { background-color: var(--color-01) !important; } 
.bg-color-02    { background-color: var(--color-02) !important; } 
.bg-color-03    { background-color: var(--color-03) !important; } 
.bg-color-04    { background-color: var(--color-04) !important; } 
.bg-color-05    { background-color: var(--color-05) !important; }
.bg-color-06    { background-color: var(--color-06) !important; } 
.bg-color-07    { background-color: var(--color-07) !important; } 
.bg-color-08    { background-color: var(--color-08) !important; } 
.bg-color-09    { background-color: var(--color-09) !important; }
.bg-color-10    { background-color: var(--color-10) !important; }

.fs-100px{ font-size:100px }


.text-success{ color:#34AF63 !important }
.bg-success{ background-color:#34AF63 !important }
.btn-success{ background-color:#34AF63 !important; border-color:#34AF6350 !important }
.btn-success:hover{ background-color:#2AA659 !important; border-color:#2AA65950 !important }
.border-success{ border-color:#34AF6350 !important }

.btn{ border-radius: 12px}

body {
    background-color: #fff;
    --bs-gutter-x: 0;
}

body .carousel-indicators [data-bs-target]{ width: 10px; height: 10px; border-radius: 100%; background-color: #D9D9D9 !important; opacity:1 }
body .carousel-indicators .active{ background-color:#34AF63 !important }

body .accordion .collapsed{ background-color:#d0eddb !important; color:#000 }

body .accordion .collapsing{ transition: all .5s; opacity:0 }
body .accordion .collapse{ transition: all .5s; opacity:0 }
body .accordion .collapse.show{ transition: all .5s; opacity:1 }

/*body .accordion .collapse{
    opacity: 0;
    transition: all .35s ease;
}

body .accordion .collapse.show{
    opacity: 1;
    transition: all .35s ease;
}

body .accordion .collapsing{
    height: auto !important;
    overflow: hidden;
    transition: all .35s ease;
    opacity: 0;
}*/

/*----------------------------------------------- attr */

.bg-warning-thin{ background-color:#FFFAE3 }
.lh-11{ line-height:1.1 }

.max-3{max-width: 350px}

/*----------------------------------------------- componentes */

.underline-1{
    position: relative;
}

.underline-1:after{
    content: '';
    width:60px;
    border-bottom: 4px solid;
    display: inline-block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}


/*----------------------------------------------- custom */


body{
    font-family: 'Ubuntu', sans-serif;
}

header {
    width: 100%;
}

.header-img-1 {
    margin-top: 0.2vw;
    height: 3vw;
}

.header-img-2 {
    height: 3.90vw;
}


.header-img-1-resp {
    display: none;
}

.navbar div {
    width: 100%;
    padding: 0.11vw 3.29vw;
}

header .navbar .nav-link{
    font-family: 'Inter', sans-serif;
    font-size: 1.03vw;
    color: #000;
    position: relative;
}

header .navbar .nav-link:after{
    content: '';
    width:0%;
    border-bottom: 1px solid;
    display: inline-block;
    position: absolute;
    bottom: -0px;
    left: 50%;
    transform: translateX(-50%);
    transition:all 0.2s
}

/* header .navbar .nav-link:hover:after
,header .navbar .nav-link.active:after{
    width:70%;
} */

.container{
    max-width: 75.34vw;
}

.reverse-logistic .block{ min-height:200px; }
.reverse-logistic .icon{ height:65px; transition:all .5s  }
.reverse-logistic .arrow{ height:20px; }

.reverse-logistic .block .inner{ background-color:#FFFAE3; cursor:pointer; transition:all .5s }
.reverse-logistic .block .inner:hover{ background-color:#DDCE8A }
.reverse-logistic .block .inner:hover .icon{ transform: translateY(15px); }


.amount-type.brl .val:before{
    content:'R$ ';
}

.amount-type.tricoins .val:after{
    content:' Tricoins';
}

.resp-val-desc { 
    display: none;
}

.resp-val-desc a {
    text-decoration: none;
    font-weight: 700;
}

.resp-val-desc a:hover {
    text-decoration: underline;
}

.resp-values {
    font-size: 1vw;
    line-height: 1.1vw;
    font-weight: 700;
}

.resp-text-bottom {
    font-size: 0.9vw;
    line-height: 1.1vw;
}

.program-ecoenel .resp-val-desc-ecoenel{ display: block}
.program-e-catador .resp-val-desc-e-catador{ display: block}
.program-e-carroceiro .resp-val-desc-e-carroceiro{ display: block}
.program-retorna-machine .resp-val-desc-retorna-machine{ display: block}

.program-empty .resp-val-desc-col{ display:none; }
.program-retorna-machine .resp-val-desc-col{ display:none; }


#map{
    width: 100%;
    height: 100%;
/*    overflow: hidden;*/
}

@keyframes blink{
    0%{ opacity:.1 }
    50%{ opacity:.5 }
    100%{ opacity:.1 }
}

.scroll {
    padding: 2.2vw 0;
}

.mapframe{
    position: relative;
}

.mapframe.loading iframe{
    animation: blink .5s infinite;
}

.mapframe.loading:after{
    content: "Processando...";
    color: #FFF;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    background-color: #00000050;
    padding: 1000px
}

.navbar-nav .nav-link{
    
    transition: all .5s;
    border-bottom: 1px solid #FFF;
    line-height: 1vw;
}

.navbar-nav .nav-link.active {
    /*border-bottom: 4px solid var(--color-05);
    color: var(--color-05); */
    color: var(--color-08);
}

.navbar-nav .nav-link.active:after {
    /*border-bottom: 4px solid var(--color-05);
    color: var(--color-05); */
    width: 48%;
    left: 30%;
    border-bottom: 3px solid var(--color-08);
}


.h-painel{ height:600px }


.cover-background {
    position: relative;
    background-size: cover;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-darker {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.6;
    top: 0;
    left: 0;
    background-color: #000;
}
.opacity-10 {opacity: .7;}
.opacity-20 {opacity: .2;}
.opacity-30 {opacity: .3;}
.opacity-40 {opacity: .4;}
.opacity-50 {opacity: .5;}
.opacity-60 {opacity: .6;}
.opacity-70 {opacity: .7;}
.opacity-80 {opacity: .8;}
.opacity-90 {opacity: .9;}

.bg-image-01 {
    background-image: url(../imgs/limpeza-praia-1.jpeg);
    background-color: #fff;
}

.logo-presentation {
    width: 25vw;
    margin-bottom: 5vw;
}

.call-hero {
    font-size: 6.9vw;
    line-height: 6.9vw;
    font-weight: 700;
    position: relative;
    margin-bottom: 5vw;
}

.h-hero {
    font-size: 2.31vw;
    line-height: 2.63vw;
    font-weight: 700;
    margin-right: 20%;
}
.p-hero {
    font-size: 1.48vw;
    line-height: 1.6vw;
}

.infographic-row {
    gap: 10vw;
    padding: 10vw 0 8vw 0;
}

.infographic-box {
    width: 50vw;
    height: 13.56vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1vw;
}

.infographic-title {
    font-size: 5.89vw;
    line-height: 6.77vw;
    font-weight: 700;
    color: var(--color-08);
    text-align: center;
}
.infographic-subtitle {
    font-size: 2.05vw;
    line-height: 2.36vw;
    font-weight: 700;
    color: var(--color-03);
    text-align: center;
}

.infographic-top-3 {
    gap: 1.5vw;
}

.infographic-title-2 {
    font-size: 8.22vw;
    line-height: 8.22vw;
    font-weight: 700;
    color: var(--color-08);
    text-align: center;
    display: inline-block;
}

.infographic-subtitle-2 {
    font-size: 2.05vw;
    line-height: 2.36vw;
    font-weight: 300;
    color: var(--color-03);
    display: block;
}

.infographic-title-3 {
    font-size: 3.5vw;
    line-height: 4vw;
    font-weight: 700;
    color: var(--color-03);
    text-align: center;
    display: block;
    margin-bottom: 0;
}

.infographic-img {
    width: 39.75vw;
    margin-top: 1.1vw;
}

.infographic-img-2 {
    width: 17.93vw;
    height: auto;
    display: flex;
    margin: -1.1vw auto 1.1vw auto;
    padding: 0.9vw 0;
}

.infographic-img-3 {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.recicle-ganhe-container {
    padding-bottom: 1vw;
    margin-bottom: 1vw;
}

.recicle-ganhe-content {
    gap: 2.2vw;
}

.recicle-e-ganhe-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.67vw 0;
    margin-bottom: 0.89vw;
}

.recicle-e-ganhe-subtitle {
    display: flex;
    align-items: center;
    width: 38.9vw;
    color: var(--color-03);
    font-size: 1.37vw;
    font-weight: 400;
    line-height: 1.575vw;
    text-align: center;
}

.recicle-e-ganhe-warning {
    width: 100%;
    color: var(--color-03);
    font-size: 0.89vw;
    line-height: 1.03vw;
    padding: 0 4.11vw;
}

.section-title-2-div {
    width: 52vw;
    margin-top: 3.29vw;
}

.section-title-2 {
    font-size: 3.49vw;
    margin-top: 4.01vw;
    color: var(--color-08);
    text-align: center;
    font-weight: 700;
}

.section-subtitle-2 {
    font-size: 1.51vw;
    line-height: 1.73vw;
    color: var(--color-03);
    font-weight: 400;
    text-align: center;
}
.section-title-3 {
    font-size: 1.1vw;
    color: var(--color-white);
    text-align: left;
    font-weight: 700;
    position: relative;
}
.section-subtitle-3 {
    font-size: 1.32vw;
    color: var(--color-white);
    text-align: left;
    font-weight: 400;
    position: relative;
}
.section-subtitle-4 {
    font-size: 2.19vw;
    line-height: 2.52vw;
    color: var(--color-03);
    text-align: center;
    position: relative;
}
.filter-topic {
    display: block;
    text-transform: uppercase;
    font-size: 1.32vw;
    font-weight: 700;
    color: var(--color-white);
    text-align: left;
    margin-bottom: 0.44vw;
    margin-top: 0.88vw;
}

.arrow-icon {
    width: 2.88vw;
    color: #EEEEEE;
}

.arrow-enabled{
    color: var(--color-08);
}

.arrow-enabled:hover {
    cursor: pointer;
    scale: 120%;
}


.intense-border              { border-radius:               var(--intense-border); }
.intense-border-top-left     { border-top-left-radius:      var(--intense-border); }
.intense-border-top-right    { border-top-right-radius:     var(--intense-border); }
.intense-border-bottom-left  { border-bottom-left-radius:   var(--intense-border); }
.intense-border-bottom-right { border-bottom-right-radius:  var(--intense-border); }
.intense-border-top          { border-top-left-radius:      var(--intense-border); border-top-right-radius:    var(--intense-border); }
.intense-border-right        { border-top-right-radius:     var(--intense-border); border-bottom-right-radius: var(--intense-border); }
.intense-border-bottom       { border-bottom-left-radius:   var(--intense-border); border-bottom-right-radius: var(--intense-border); }
.intense-border-left         { border-top-left-radius:      var(--intense-border); border-bottom-left-radius:  var(--intense-border); }

.weak-border              { border-radius:               var(--weak-border); }
.weak-border-top-left     { border-top-left-radius:      var(--weak-border); }
.weak-border-top-right    { border-top-right-radius:     var(--weak-border); }
.weak-border-bottom-left  { border-bottom-left-radius:   var(--weak-border); }
.weak-border-bottom-right { border-bottom-right-radius:  var(--weak-border); }
.weak-border-top          { border-top-left-radius:      var(--weak-border); border-top-right-radius:    var(--weak-border); }
.weak-border-right        { border-top-right-radius:     var(--weak-border); border-bottom-right-radius: var(--weak-border); }
.weak-border-bottom       { border-bottom-left-radius:   var(--weak-border); border-bottom-right-radius: var(--weak-border); }
.weak-border-left         { border-top-left-radius:      var(--weak-border); border-bottom-left-radius:  var(--weak-border); }

.small-border             {border-radius: 20px;}

.min-h-200 { min-height: 200px;}
.min-h-250 { min-height: 250px;}
.min-h-300 { min-height: 300px;}
.min-h-350 { min-height: 350px;}
.min-h-400 { min-height: 400px;}
.min-h-450 { min-height: 450px;}
.min-h-500 { min-height: 500px;}
.min-h-550 { min-height: 550px;}
.min-h-600 { min-height: 600px;}
.min-h-650 { min-height: 650px;}
.min-h-700 { min-height: 700px;}
.min-h-750 { min-height: 750px;}
.min-h-800 { min-height: 800px;}


.nav-pills-custom {
    justify-content:center;
    gap: 1vw;
    padding: 0.66vw 0; /*py-3*/
}

.nav-pills-custom .nav-link {
    padding: 0.66vw 1.6vw;
    border-radius: 35.1vw;
    color: var(--color-03);
    font-size: 1.5vw;
    font-weight: 700;
    text-align: left;
}
.nav-pills-custom .nav-link:hover {
    background-color: var(--color-08);
}
.nav-pills-custom .nav-link.active, .nav-pills-custom .show>.nav-link {
    background-color: var(--color-08);
    color: #fff;
}

.info-card-residue {
    margin-top: 2.63vw;
    width: 70vw;
    height: 25vw;
}

.tab-content-custom {
    margin: 0 4.38vw;
    text-align: center;
    color: #000;
}

.tab-content-custom .tab-pane > div {
    padding: 2.5vw 0;
}

.tab-pane-card {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
    font-size: 1.71vw;
    line-height: 1.97vw;
}

.btn-card-info {
    width: 7.40vw;
    height: 1.78vw;
    font-size: 0.822vw;
    font-weight: 700;
    border-radius: 8.77vw;
    box-shadow: 0 0.274vw 0.274vw 0 #00000040;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: var(--color-03);
}

.btn-card-info:hover {
    background-color: var(--color-09);
    color: #fff;
    cursor: pointer;
}

.tab-content-custom .tab-pane p {
    font-size: 1.03vw;
    line-height: 1.18vw;
    margin-top: 1.32vw;
}

.text-card-info {
    font-size: 1.03vw;
    line-height: 1.18vw;
    margin: 1.32vw 0;
}

.tab-content-custom .tab-pane p a{
    text-decoration: none;
}

.tab-content-custom .tab-pane p a:hover{
    text-decoration: underline;
    font-weight: 700;
}

.hr-white {
    color: var(--color-white);
    opacity: .2;
}

.recicle-ganhe-form {
    display: block;
}

.calc-container {
    width: 39vw;
}

#program-box > div {
    height: 15.5vw;
    width: 100%;
    border-radius: 3.42vw;
    padding: 2.4vw 4.11vw 0px 4.11vw;
    margin-top: 0.9vw;
}


.form-select-custom {
    width: 25.4vw;
    padding-top: 0.55vw;
    padding-bottom: 0.55vw;
    padding-left: 1.1vw;
    font-size: 1.37vw;
    border-radius: 3.29vw;
    color: var(--color-03);
    font-style: italic;
}

.form-select .form-select-custom {
    margin-bottom: 1.1vw;
}

.form-select-custom .option-select {
    color: var(--color-gray-05);
}

.input-group {
    width: 25.4vw;
    margin-bottom: 1.1vw;
}

.money-hero {
    color: var(--color-white);
    font-size: 3.29vw;
    font-weight: 700;
}

.container-resp-values {
    margin: 0.9vw 0;
    gap: 1.75vw;
}

.btn-residometro-responsive {
    display: none;
}


.btn-hero {
    font-size: 1.51vw;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.73vw;
    margin-top: 1.1vw;
    padding-top: 1.15vw;
    border-radius: 7.12vw;
    background-color: var(--color-white);
    color: var(--color-black);
    border: 0.1vw solid var(--color-black);
    width: 24.64vw;
    height: 4.02vw;
}
.btn-hero:hover {
    background-color: var(--color-08);
    border: none;
}
.btn-hero:focus {
    color: #fff;
    background-color: var(--color-08);
    border-color: none;
}

.card-ganhe-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-ganhe-recicla-mais {
    width: 20vw;
}

.btn-card-ganhe {
    width: 19.5vw;
    height: 3.38vw;
    font-size: 1.64vw;
    font-weight: 700;
    border-radius: 6.44vw;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-white);
    color: var(--color-03);
    cursor: pointer;
}

.btn-card-ganhe.card-click-flag:hover {
    background-color: var(--color-08);
    color: var(--color-white);
}

.btn-shadow {
    box-shadow: 0 0.27vw 0.27vw 0 #00000040;
    height: 3.15vw;
    background-color: #fff;
    color: var(--color-03);
}

.btn-shadow:hover {
    background-color: var(--color-06);
    color: #fff;
}

.btn-card-ganhe span {
    font-size: 1.30vw;
}

.btn-card-selected {
    background-color: var(--color-08);
    color: var(--color-white);
}

.reciclo-card-container {
    padding: 3.29vw;
    margin-top: 2.63vw;
}

.reciclo-card-content {
    padding: 3.29vw 0;
    gap: 2.63vw;
}

.reciclo-card-navbar {
    display: flex;
    flex-direction: column;
}

.card-component {
    width: 45.75vw;
    height: 32.95vw;
    border-radius: 4.66vw;
    background-color: var(--color-08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.685vw;
    padding: 2.19vw 6.03vw;
}

.card-component h1 {
    font-size: 1.58vw;
    font-weight: 700;
    line-height: 1.78vw;
    text-align: center;
}

.card-component h2 {
    font-size: 1.44vw;
    font-weight: 400;
    line-height: 1.64vw;
    text-align: center;
    margin: 1.03vw 0 1.37vw 0;
}

.card-component div {
    font-size: 2.88vw;
    font-weight: 700;
    line-height: 3.28vw;
    text-align: center;
}

.card-component h2 a {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
}

.card-component h2 a:hover {
    text-decoration: underline;
}

.reciclo-arrow-icon {
    display: none;
}

.points-list {
    display: none;
}

.btn-custom {
    width: 18.56vw;
    height: 4.45vw;
    font-size: 1.51vw;
    line-height: 1.71vw;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 7.12vw;
    background-color: var(--color-white);
    color: var(--color-black);
    border: 0.1vw solid var(--color-black);
    margin-right: 0.822vw;
}

.btn-custom:hover {
    background-color: var(--color-08);
    border: none;
}
.btn-custom:focus {
    color: #fff;
    background-color: var(--color-08);
    border-color: none;
}
.img-float-hero {
    position: absolute;
    bottom: 4.11vw;
    width: 25.41vw;
    float: right;
    right: 0;
}
.img-wave {
    top: -2vw;
    width: 27vw;
    left: 5.8vw;
    position: absolute;
}
/* .img-wave-2 {
    top: 100px;
    width: 35%;
    left: -40px;
    position: relative;
    margin-top: -200px;
} */

.residometro-container {
    align-self: center;
    padding: 5.48vw 0;
}

.residometro-content {
    display: flex;
    justify-content: center;
    gap: 1.64vw;
}

.residometro-content > :first-child {
    width: 26%;
}

.img-residometro {
    height: 23.36vw;
    border-radius: 1.78vw;
}

.img-wave-3 {
    bottom: 5.04vw;
    width: 22.26vw;
    right: 9%;
    position: absolute;
    float: right;
    z-index: -1;
}

.box-sticker-items {
    display: flex;
    justify-content: center;
    gap: 1.5vw;
}

.box-sticker-items > div {
    width: 11.71vw;
    gap: 0.5vw;
}

.div-sticker-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.78vw;
    height: 6.77vw;
    padding: 0.7vw;
    border-radius: 2.88vw;
    margin-bottom: 1.64vw;
}

.img-sticker {
    width: 4.85vw;
}

.img-title-box {
    display: flex;
    justify-content: center;
    margin-bottom: 3.29vw;
}

.img-title {
    width: 21vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    padding-left: 2.5vw;
    padding-right: 1vw;
    padding-top: 0.2vw;
}
.sticker-title {
    font-size: 1.44vw;
    line-height: 1.65vw;
    font-weight: 700;
    color: var(--color-03);
    text-align: center;
    padding: 0 1.9vw;
}
.sticker-subtitle {
    font-size: 1.44vw;
    line-height: 1.65vw;
    font-weight: 400;
    color: var(--color-03);
    text-align: center;
}

.border-box-stickers {
    border-top: 0.411vw solid var(--color-03);
    margin-top: 5.48vw;
    --bs-gutter-x: 0;
    margin-bottom: 2vw;
    height: 30vw;
}

.margin-recicla {
    margin-bottom: 15vw;
}

.border-box-stickers .box-stickers {
    transform: translateY(-80px);  
}

.border-extra{
    border-left: 0.411vw solid var(--color-03);
    border-right: 0.411vw solid var(--color-03);
    padding: 0;
    width: 100%;
    height: 20.4vw;
    position: absolute;
}

@keyframes zoom-blink{
    0%{ transform: scale(1)}
    50%{ transform: scale(1.1)}
    100%{ transform: scale(1)}
}

.a-zoom-blink-hover:hover{ animation: zoom-blink 1s infinite; }

#apresentacao > div {
    padding-top: 6.58vw;
}

#apresentacao .img-wave{
    transform: rotate(45deg) translate(-500px,100px);
    transition: all 1s;
}

#apresentacao.show .img-wave{
    transform: rotate(0deg) translate(0px,0px);
}

#apresentacao .call-hero{
    transition:all .5s;
    transform: skew(-30deg) translateX(-200px);
    z-index: 9;
}

#apresentacao.show .call-hero{
    transform: skew(0deg) translateX(0px)
}

.show-up{ transition:all 1s; opacity:0; transform:translateY(60px); }
.show .show-up{ opacity:1; transform:translateY(0px); }

.show-left{ transition:all 1s; transform:translateX(60px); }
.show .show-left{ transform:translateX(0px); }


.where{
    overflow: hidden;
}

.onde-reciclar-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5vw 0;
}

.coleta iframe {
    border: none;
    width: 100vw;
    min-height: 60vw;
}

.entrega iframe {
    border: none;
    width: 100vw;
    min-height: 60vw;
}


.return-option {
    position:absolute;
    top: 1.5vw;
    left: 4.38vw;
    color: #fff;
    font-size: 1.51vw;
    font-weight: 700;
    line-height: 1.71vw;
}

.return-option:hover {
    cursor: pointer;
}

.arrow-return {
    width: 1.37vw;
    height: 1.37vw;
}

.onde-reciclar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.onde-reciclar-content h1 {
    font-size: 3.49vw;
    font-weight: 700;
    line-height: 4.04vw;
}

.onde-reciclar-content h2 {
    font-size: 1.58vw;
    line-height: 1.81vw;
    font-weight: 400;
}

.onde-reciclar-menu {
    display: flex;
    gap: 1.71vw;
}

.onde-reciclar-option {
    background-color: var(--color-08);
    width: 32.19vw;
    height: 19.32vw;
    border-radius: 1.37vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1vw;
    padding: 0 5.92vw;
}

.onde-reciclar-option p {
    color: var(--color-03);
    font-size: 1.44vw;
    font-weight: 700;
    line-height: 1.64vw;
}

.onde-reciclar-option button {
    border: none;
    background-color: #fff;
    color: var(--color-03);
    width: 18.63vw;
    height: 5.92vw;
    border-radius: 7.12vw;
    font-size: 1.92vw;
    font-weight: 700;
    line-height: 2.19vw;
}

.onde-reciclar-option button:hover {
    background-color: var(--color-06);
    color: #fff;
}

.footer-top {
    padding: 3.84vw 10vw;
}

.footer-mais-fort img {
    width: 447.57px;
}

.footer-text-link {
    color: #000;
    font-size: 0.96vw;
    font-style: italic;
    font-weight: 700;
    line-height: 1.1vw;
    text-decoration: none;
}
.footer-text-link:hover {
    text-decoration: underline;
    color: #000;
}

.footer-text-warning {
    width: 35vw;
    font-size: 1.1vw;
    line-height: 1.23vw;
}

.footer-text-date-place {
    font-size: 1.23vw;
    font-weight: 400;
    color:#000;
    line-height: 1.71vw;
}

.footer-logo-maisfort-left {
    width: 10.23vw;
}

.footer-logo-maisfort-right {
    width: 18.42vw;
}

.footer-logo-obsr {
    width: 12.65vw;
    margin-right: 2vw;
}

.footer-logo-citinova {
    width: 12.38vw;
    margin-right: 2vw;
}

.footer-logo-iplanfor {
    width: 11vw;
}

.footer-logo-desiglab {
    width: 14.8vw;
}

.footer-logo-alliance {
    width: 10.34vw;
}

.footer-logo-whatworkcities {
    width: 4.77vw;
}

.footer-logo-fort2040 {
    width: 4.5vw;
}

.footer-logo-cidadesint {
    width: 9.6vw;
}

.footer-logo-nua {
    width: 3.9vw;
}

.footer-logo-sdgoals {
    width: 8.56vw;
}

.footer-logo-unesco {
    width: 10.34vw;
}

.footer-responsive {
    display: none;
}

.contact-container h1 {
    width: 26.7vw;
    font-size: 2.47vw;
    font-weight: 700;
    line-height: 2.81vw;
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1vw;
}

.contact-form button {
    border: 0.07vw solid #CED4DA;
    border-radius: 0.34vw;
    font-size: 1.04vw;
    color: #000;
    width: 26.7vw;
}

.contact-form button:hover {
    background-color: #646664;
    color: #fff;
}

.form-group input {
    width: 26.7vw;
}

.form-group input::placeholder {
    color: #646664;
    font-size: 0.99vw;
}

.form-group textarea {
    width: 26.7vw;
}

.form-group textarea::placeholder {
    color: #646664;
    font-size: 0.99vw;
}

.agreement-box {
    width: 26.7vw;
    display: flex;
    align-items: center;
    gap: 1.1vw;
    font-size: 1.1vw;
    font-weight: 700;
    line-height: 1.23vw;
}

.notification-container {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(132, 132, 132, 0.6);
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sent-notification {
    width: 25vw;
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.34vw;
}

.close-icon {
    width: 1.64vw;
    height: 1.64vw;
    top: 0.22vw;
    right: 0.22vw;
}

.close-icon:hover {
    cursor: pointer;
}