/*
Softy Pinko
https://templatemo.com/tm-535-softy-pinko
*/
/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. welcome
06. features
07. team
08. pricing
09. blog
10. contact
11. footer
12. preloader
--------------------------------------------- */
/*
---------------------------------------------
font & reset css
---------------------------------------------
*/
@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900");
/*
---------------------------------------------
reset
---------------------------------------------
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
header, nav, section, article, aside, footer, hgroup {
display: block;
}
* {
box-sizing: border-box;
}
html, body {
font-family: "Raleway", sans-serif;
font-weight: 400;
background-color: #fff;
font-size: 16px;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none !important;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0px;
margin-bottom: 0px;
}
ul {
margin-bottom: 0px;
}
/*
---------------------------------------------
global styles
---------------------------------------------
*/
html,
body {
background: #fff;
font-family: "Raleway", sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Isso garante que o corpo ocupe pelo menos a altura da janela do navegador. */
margin: 0;
padding: 0;
}
.content-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.main-content {
flex: 1; /* O conteúdo preencherá o espaço disponível */
}
::selection {
background: #ff589e;
color: #fff;
}
::-moz-selection {
background: #ff589e;
color: #fff;
}
.section {
position: relative;
padding-top: 100px;
padding-bottom: 80px;
}
.section.colored {
background: #f2f2fe;
}
.hr {
bottom: 0px;
width: 100%;
height: 1px;
margin-top: 100px;
border-bottom: 1px solid #eee;
}
.left-heading.light .section-title {
color: #ffffff;
}
.left-heading .section-title {
font-weight: 500;
font-size: 24px;
line-height: 42px;
color: #1e1e1e;
letter-spacing: 0.25px;
margin-bottom: 30px;
position: relative;
}
.center-heading {
text-align: center;
}
.center-heading .section-title {
font-weight: 500;
font-size: 28px;
color: #1e1e1e;
letter-spacing: 1.75px;
line-height: 38px;
margin-bottom: 20px;
}
.center-heading.colored .section-title {
color: #ffffff;
}
.center-text {
text-align: center;
font-weight: 400;
font-size: 16px;
color: #777;
line-height: 28px;
letter-spacing: 1px;
margin-bottom: 50px;
}
.center-text.colored {
color: #fff;
}
.center-text p {
font-size: 15px;
color: #777;
margin-bottom: 30px;
}
.left-text {
font-weight: 400;
font-size: 16px;
color: #777;
line-height: 28px;
letter-spacing: 1px;
}
.left-text.light {
color: #fff;
}
.left-text p {
margin-bottom: 30px;
}
.left-text p.dark {
color: #3B566E;
}
.justify-text {
font-weight: 400;
font-size: 16px;
color: #777;
line-height: 28px;
letter-spacing: 1px;
text-align: justify;
}
.padding-bottom-top-5 {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.padding-bottom-top-10 {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.padding-bottom-top-20 {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.padding-bottom-top-60 {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.padding-bottom-80 {
padding-bottom: 80px !important;
}
.padding-bottom-100 {
padding-bottom: 100px !important;
}
.padding-bottom-200 {
padding-bottom: 200px !important;
}
.padding-bottom-10 {
padding-bottom: 10px !important;
}
.padding-bottom-20 {
padding-bottom: 20px !important;
}
.border-bottom {
border-bottom: 1px solid #eee !important;
}
.mbottom-30 {
margin-bottom: 30px !important;
}
.align-self-center {
-ms-flex-item-align: center !important;
align-self: center !important;
}
.align-self-bottom {
-ms-flex-item-align: flex-end !important;
align-self: flex-end !important;
}
.padding-bottom-0 {
padding-bottom: 0px !important;
}
.padding-bottom-10 {
padding-bottom: 10px !important;
}
.padding-bottom-20 {
padding-bottom: 20px !important;
}
.padding-bottom-30 {
padding-bottom: 30px !important;
}
.padding-bottom-40 {
padding-bottom: 40px !important;
}
.padding-top-0 {
padding-top: 0px !important;
}
.padding-top-120 {
padding-top: 240px !important;
}
.padding-top-80 {
padding-top: 80px !important;
}
.padding-top-70 {
padding-top: 70px !important;
}
.padding-top-30 {
padding-top: 30px !important;
}
.padding-top-20 {
padding-top: 20px !important;
}
.padding-top-10 {
padding-top: 10px !important;
}
.padding-top-5 {
padding-top: 5px !important;
}
.margin-bottom-0 {
margin-bottom: 0px !important;
}
.margin-bottom-30 {
margin-bottom: 30px !important;
}
.margin-top-30 {
margin-top: 30px !important;
}
.margin-top-15 {
margin-top: 15px !important;
}
.margin-bottom-45 {
margin-bottom: 45px !important;
}
.margin-bottom-20 {
margin-bottom: 20px !important;
}
.margin-bottom-60 {
margin-bottom: 60px !important;
}
.margin-bottom-100 {
margin-bottom: 100px !important;
}
@media (max-width: 991px) {
html, body {
overflow-x: hidden;
}
.mobile-top-fix {
margin-top: 30px;
margin-bottom: 0px;
}
.mobile-bottom-fix {
margin-bottom: 30px;
}
.mobile-bottom-fix-big {
margin-bottom: 60px;
}
}
a.main-button-slider {
font-size: 13px;
border-radius: 10px;
padding: 12px 20px;
background-color: #ff589e;
text-transform: uppercase;
color: #fff;
letter-spacing: 0.25px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
a.main-button-slider:hover {
background-color: #8261ee;
}
a.main-button {
font-size: 13px;
border-radius: 10px;
padding: 12px 20px;
background-color: #8261ee;
text-transform: uppercase;
color: #fff;
letter-spacing: 0.25px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
a.main-button:hover {
background-color: #ff589e;
}
button.main-button {
outline: none;
border: none;
cursor: pointer;
font-size: 13px;
border-radius: 10px;
padding: 12px 20px;
background-color: #8261ee;
text-transform: uppercase;
color: #fff;
letter-spacing: 0.25px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
button.main-button:hover {
background-color: #ff589e;
}
/*
---------------------------------------------
header
---------------------------------------------
TRANSFERIDO PARA O MENU.CSS
*/
/*
---------------------------------------------
welcome
---------------------------------------------
*/
.welcome-area {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(-45deg, #514983, #e53b94, #58caef, #66bd5f);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wave-container {
position: relative;
}
.welcome-area::before {
content: "";
width: 100%;
height: 68px;
position: absolute;
bottom: -0.3%;
left: 0;
background-size: auto;
background-repeat: repeat no-repeat;
background-position: 0vw bottom;
background-image: url("data:image/svg+xml;utf8,");
}
.welcome-area-small {
/* overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-image: url(../img/SiteRaras/banner-bg_small.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 250px;
top: -70px;
padding-bottom: 0;
border: 1px solid blue;
*/
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/*background-image: url('../img/SiteRaras/BANNER PRINCIPAL 2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;*/
background: linear-gradient(-45deg, #514983, #e53b94, #58caef, #66bd5f);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 225px;
}
.welcome-area-small::before {
content: "";
width: 100%;
height: 68px;
position: absolute;
bottom: -0.3%;
left: 0;
background-size: auto;
background-repeat: repeat no-repeat;
background-position: 0vw bottom;
background-image: url("data:image/svg+xml;utf8,");
}
/* Media queries para controle de tamanho de imagem */
@media (max-width: 767px) {
.welcome-area img {
max-width: 80%; /* Permite que a imagem cresça até o máximo da largura disponível */
height: auto; /* Mantém a proporção da imagem */
}
}
@media (min-width: 768px) {
.welcome-area img {
max-width: 70%; /* Aelcome-areaumenta a largura máxima permitida para a imagem */
height: auto; /* Mantém a proporção da imagem */
}
}
@media (min-width: 992px) {
.welcome-area img {
max-width: 60%; /* Aumenta ainda mais a largura máxima permitida para a imagem em telas grandes */
height: auto; /* Mantém a proporção da imagem */
}
}
/*
---------------------------------------------
*/
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
.context {
width: 100%;
position: absolute;
top:50vh;
}
.context h1{
text-align: center;
color: #fff;
font-size: 50px;
}
.area{
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height:100vh;
}
.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
.black {
color: #000;
}
/*
---------------------------------------------
features
---------------------------------------------
*/
.features-small-item {
cursor: pointer;
display: block;
background: #FFFFFF;
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.10);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 30px;
text-align: center;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
position: relative;
margin-bottom: 30px;
}
.features-small-item:hover .icon {
background-color: #ff589e;
}
.features-small-item .icon {
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
width: 90px;
height: 90px;
line-height: 90px;
margin: auto;
position: relative;
margin-bottom: 30px;
background: #8261ee;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.features-small-item .icon i {
font-size: 38px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.features-small-item .features-title {
font-weight: 500;
font-size: 18px;
color: #1e1e1e;
letter-spacing: 0.7px;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.features-small-item p {
font-weight: 400;
font-size: 13px;
color: #777;
letter-spacing: 0.5px;
line-height: 25px;
position: relative;
z-index: 2;
}
.features-small-item a {
float: right;
position: relative;
z-index: 2;
}
.home-feature {
padding-bottom: 0px;
padding-top: 30px;
margin-top: -220px;
z-index: 9;
}
@media (max-width: 991px) {
.home-feature {
padding-bottom: 0px;
padding-top: 0px;
margin-top: 0px;
}
}
/*
---------------------------------------------
parallax & home seperator
---------------------------------------------
*/
/*
.mini {
min-height: 215px;
overflow: hidden;
position: relative;
padding-top: 90px;
padding-bottom: 90px;
}
.mini:before {
content: '';
position: absolute;
width: 140%;
height: 140%;
opacity: .95;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url(../img/SiteRaras/work-process-bg.png);
z-index: 2;
top: -20%;
left: -20%;
}
.mini .mini-content {
position: relative;
z-index: 3;
}
.mini .mini-content .info {
text-align: center;
color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.mini .mini-content .info small {
display: block;
font-weight: 400;
font-size: 13px;
margin-bottom: 5px;
}
.mini .mini-content .info strong {
font-weight: 700;
font-size: 17px;
margin-bottom: 40px;
display: block;
}
.mini .mini-content .info h1 {
color: #fff;
font-weight: 500;
font-size: 28px;
letter-spacing: 0.25px;
margin-bottom: 30px;
}
.mini .mini-content .info p {
letter-spacing: 1px;
margin-bottom: 40px;
color: #fff;
letter-spacing: 0.25px;
line-height: 26px;
font-weight: 400;
font-size: 15px;
}
.mini .mini-content .info p span {
text-decoration: underline;
}
.mini .mini-content .mini-box {
display: block;
background: #fff;
padding: 20px;
border-radius: 20px;
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
position: relative;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
text-align: center;
}
.mini .mini-content .mini-box:hover {
margin-top: -10px;
}
.mini .mini-content .mini-box:before {
content: '';
position: absolute;
z-index: -1;
background: #fff;
width: 100%;
opacity: .15;
height: 100%;
bottom: -10px;
left: 0px;
right: -20px;
margin: auto;
border-radius: 20px;
}
.mini .mini-content .mini-box i {
display: block;
font-size: 20px;
margin-bottom: 15px;
}
.mini .mini-content .mini-box span {
display: block;
font-weight: 400;
font-size: 14px;
color: #777;
letter-spacing: .75px;
}
.mini .mini-content .mini-box strong {
display: block;
font-weight: 400;
font-size: 17px;
color: #1e1e1e;
letter-spacing: 0.25px;
margin-bottom: 5px;
margin-top: 20px;
}
.counter {
overflow: hidden;
position: relative;
}
.counter:before {
content: '';
position: absolute;
width: 140%;
height: 140%;
opacity: .90;
background-image: url(../img/SiteRaras/fun-facts-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
z-index: 2;
top: -20%;
left: -20%;
}
.counter .content {
position: relative;
z-index: 3;
width: 100%;
}
.counter .content .count-item {
height: 340px;
position: relative;
float: left;
width: 100%;
}
.counter .content .count-item.decoration-bottom {
position: relative;
}
.counter .content .count-item.decoration-bottom:after {
content: '';
position: absolute;
width: 70%;
height: 32px;
top: 160px;
left: 70%;
background: url(../img/SiteRaras/circle-dec.png) center center no-repeat;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.counter .content .count-item.decoration-top {
position: relative;
}
.counter .content .count-item.decoration-top:after {
content: '';
position: absolute;
width: 70%;
height: 32px;
top: 140px;
left: 70%;
background: url(../img/SiteRaras/circle-dec.png) center center no-repeat;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.counter .content .count-item:hover strong {
margin-top: 110px;
}
.counter .content .count-item strong {
display: block;
text-align: center;
font-weight: 600;
font-size: 36px;
letter-spacing: 0.25px;
margin-bottom: 10px;
color: #fff;
margin-top: 120px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.counter .content .count-item span {
display: block;
text-align: center;
color: #fff;
font-weight: 500;
font-size: 17px;
letter-spacing: 0.25px;
}
@media (max-width: 991px) {
.parallax {
padding-top: 60px;
padding-bottom: 60px;
min-height: auto;
}
.parallax .content {
position: relative !important;
top: 0% !important;
transform: perspective(1px) translateY(0%) !important;
}
.counter {
padding-top: 60px;
padding-bottom: 60px;
}
.counter .content {
position: relative !important;
top: 0% !important;
transform: perspective(1px) translateY(0%) !important;
}
.counter .content .count-item {
height: auto;
padding-top: 20px;
padding-bottom: 20px;
}
.counter .content .count-item:hover strong {
margin-top: 0px;
}
.counter .content .count-item:before {
display: none;
}
.counter .content .count-item:after {
display: none;
}
.counter .content .count-item strong {
margin-top: 0px;
}
}
/*
---------------------------------------------
team
---------------------------------------------
*/
.team-item {
background: #fff;
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.10);
border-radius: 20px;
position: relative;
margin-bottom: 30px;
padding-bottom: 25px;
}
.team-item:hover .team-content .team-info {
margin-left: 30px;
}
.team-item i {
display: block;
margin-left: 25px;
margin-top: 25px;
font-size: 30px;
color: #4E47DE;
text-align: center;
}
.team-item .user-image {
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
margin-left: 25px;
float: left;
}
.team-item .team-content {
text-align: left;
overflow: hidden;
}
.team-item .team-content .team-info {
float: left;
margin-left: 20px;
margin-top: 8px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.team-item .team-content .team-info .user-name {
display: block;
font-weight: 400;
font-size: 17px;
color: #1e1e1e;
letter-spacing: 0.25px;
margin-bottom: 5px;
}
.team-item .team-content .team-info span {
display: block;
font-weight: 400;
font-size: 15px;
color: #ff589e;
letter-spacing: 0.25px;
}
.team-item .team-content p {
margin-top: 25px;
padding-left: 25px;
padding-right: 25px;
margin-bottom: 25px;
font-weight: 400;
font-size: 15px;
color: #777;
letter-spacing: 0.6px;
line-height: 26px;
}
/*
---------------------------------------------
pricing
---------------------------------------------
*/
.pricing-item {
background: #FFFFFF;
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.1);
border-radius: 20px;
margin-bottom: 30px;
margin-top: 20px;
padding: 30px 0px 40px 0px;
}
.pricing-item.active .pricing-header {
position: relative;
}
.pricing-item.active .pricing-header .pricing-title {
color: #1e1e1e;
}
.pricing-item.active .pricing-body .price-wrapper {
background-color: #ff589e;
}
.pricing-item.active .pricing-body .price-wrapper .currency {
color: #fff;
}
.pricing-item.active .pricing-body .price-wrapper .price {
color: #fff;
}
.pricing-item.active .pricing-body .price-wrapper .period {
color: #fff;
}
.pricing-item .pricing-header {
text-align: center;
display: block;
position: relative;
padding-bottom: 10px;
}
.pricing-item .pricing-header .pricing-title {
font-weight: 500;
font-size: 17px;
letter-spacing: 0.25px;
color: #1e1e1e;
width: 180px;
height: 40px;
line-height: 40px;
left: 0px;
right: 0px;
margin: auto;
}
.pricing-item .pricing-body {
margin-bottom: 40px;
}
.pricing-item .pricing-body .price-wrapper {
text-align: center;
padding-top: 20px;
padding-bottom: 13px;
background: #8261ee;
width: 80%;
margin: auto;
margin-bottom: 40px;
margin-top: 5px;
border-radius: 20px;
}
.pricing-item .pricing-body .price-wrapper .currency {
height: 47px;
font-weight: 500;
font-size: 32px;
color: #fff;
position: relative;
top: -1px;
}
.pricing-item .pricing-body .price-wrapper .price {
font-weight: 500;
font-size: 28px;
color: #fff;
}
.pricing-item .pricing-body .price-wrapper .period {
font-weight: 400;
font-size: 14px;
color: #fff;
display: block;
letter-spacing: 0.88px;
}
.pricing-item .pricing-body .list li {
text-align: center;
margin-bottom: 12px;
font-weight: 400;
font-size: 13px;
color: #7a7a7a;
letter-spacing: 0.25px;
text-decoration: line-through;
}
.pricing-item .pricing-body .list li.active {
color: #7a7a7a;
text-decoration: none;
}
.pricing-item .pricing-footer {
text-align: center;
margin-top: 50px;
}
/*
---------------------------------------------
blog
---------------------------------------------
*/
.blog-post-thumb {
text-align: center;
margin-bottom: 30px;
}
.blog-post-thumb.big .img {
height: 400px;
}
.blog-post-thumb .img {
overflow: hidden;
border-radius: 20px;
position: relative;
height: 200px;
}
.blog-post-thumb .blog-content {
margin-top: -30px;
padding-top: 50px;
}
.blog-post-thumb h3 {
margin-bottom: 20px !important;
}
.blog-post-thumb h3 a {
font-weight: 500;
font-size: 18px;
color: #1e1e1e;
letter-spacing: 0.25px;
line-height: 26px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.blog-post-thumb h3 a:hover {
color: #ff589e;
}
.blog-post-thumb .text {
font-weight: 400;
font-size: 13px;
color: #777;
letter-spacing: 0.26px;
line-height: 26px;
margin-bottom: 15px;
}
.blog-post-thumb .post-footer span {
float: left;
height: 30px;
line-height: 30px;
font-weight: 300;
font-size: 14px;
color: #777;
padding-left: 30px;
}
.blog-post-thumb a.main-button {
margin-top: 10px;
display: inline-block;
}
.blog-list .blog-post-thumb {
text-align: left;
}
/*
---------------------------------------------
contact
---------------------------------------------
*/
#contact-us {
padding: 160px 0px;
}
#contact-us h5 {
font-weight: 500;
font-size: 18px;
color: #1e1e1e;
letter-spacing: 0.25px;
line-height: 26px;
}
.contact-text {
font-weight: 400;
font-size: 14px;
color: #6F8BA4;
letter-spacing: 0.6px;
line-height: 26px;
}
.contact-text p {
margin-bottom: 28px;
}
.contact-form input,
.contact-form textarea {
color: #777;
font-size: 14px;
border: 1px solid #eee;
width: 100%;
height: 50px;
outline: none;
padding-left: 20px;
padding-right: 20px;
border-radius: 25px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-bottom: 30px;
}
.contact-form textarea {
height: 150px;
resize: none;
padding: 20px;
}
.social-lista {
overflow: hidden;
margin-top: 10px;
text-align: left;
list-style-type: none; /* Remova os marcadores de lista */
padding: 0; /* Remova o padding padrão das listas */
}
.social-lista li {
display: block;
margin-bottom: 10px; /* Espaçamento entre os itens da lista */
text-align: left; /* Alinhar o conteúdo do à esquerda */
}
.social-lista li a {
color: #9d5bd9;
background-color: #fff;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
display: inline-block;
font-size: 16px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
text-decoration: none;
padding-left: 10px; /* Espaçamento entre o ícone e o nome */
text-align: left; /* Alinhar o texto à esquerda */
position: relative; /* Posição relativa para centralizar o ícone */
}
.social-lista li a i {
position: absolute; /* Posição absoluta para centralizar o ícone */
top: 50%; /* Centralizar verticalmente */
left: 50%; /* Centralizar horizontalmente */
transform: translate(-50%, -50%); /* Centralizar perfeitamente */
}
.social-lista li a span {
margin-left: 40px; /* Espaçamento entre o ícone e o nome */
}
.social-lista li a span:hover {
color: #ff589e;
}
.social-lista li a i {
flex-shrink: 0; /* Evite que o ícone seja redimensionado */
}
.social-lista li a:hover {
background-color: #ff589e;
color: #fff;
}
/*
---------------------------------------------
footer
---------------------------------------------
*/
footer {
background-image: linear-gradient(127deg, #a759d1 0%, #8261ee 91%);
padding-top: 30px;
}
footer .social {
overflow: hidden;
margin-top: 10px;
text-align: center;
}
footer .social li {
margin: 0px 10px;
display: inline-block;
}
footer .social li a {
color: #9d5bd9;
text-align: center;
background-color: #fff;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
display: inline-block;
font-size: 16px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
footer .social li a:hover {
background-color: #ff589e;
color: #fff;
}
footer .copyright {
text-align: center;
border-top: 1px solid rgba(250,250,250,0.2);
margin-top: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight: 400;
font-size: 12px;
color: #fff;
letter-spacing: 0.88px;
text-transform: uppercase;
}
@media (max-width: 991px) {
footer .text {
margin-bottom: 30px;
}
footer h5 {
margin-bottom: 15px;
}
footer .footer-nav {
margin-bottom: 30px;
}
}
/*
---------------------------------------------
preloader
---------------------------------------------
*/
#preloader {
overflow: hidden;
background-image: linear-gradient(135deg, #a759d1 0%, #8261ee 100%);
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 9999;
color: #fff;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper > div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper > div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper > div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
@-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*--------------------------------------*/
#raras {
scroll-margin-top: 125px;
}
#projeto {
scroll-margin-top: 125px;
}
#doencas {
scroll-margin-top: 125px;
}
#pesquisa {
scroll-margin-top: 125px;
}
#contato {
scroll-margin-top: 125px;
}
/*--------------------------------------*/
/**************************************************/
/**** Listas Itens ****/
/**************************************************/
.lista-itens ul {
display: block;
margin-left: 50px;
}
.lista-itens ul li {
display: block;
position: relative;
margin-bottom: 30px;
}
.lista-itens ul li:not(:last-child) {
margin-bottom: 16px;
}
.lista-itens ul li:before {
content: "";
position: absolute;
top: 1.2em;
left: -30px;
margin-top: -.9em;
background: #f69ec4;
height: 12px;
width: 12px;
border-radius: 50%;
}
/**************** Custom Box **********/
/*** Adicionado por Mateus: 11-07-23 **/
.custom-box {
display: block;
background: #fff;
padding: 20px;
border-radius: 20px;
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
position: relative;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
text-align: center;
}
.custom-box:hover {
margin-top: -10px;
}
.custom-box:before {
content: '';
position: absolute;
z-index: -1;
background: #fff;
width: 100%;
opacity: .15;
height: 100%;
bottom: -10px;
left: 0px;
right: -20px;
margin: auto;
border-radius: 20px;
}
.custom-box i {
display: block;
font-size: 20px;
margin-bottom: 15px;
}
.custom-box span {
display: block;
font-weight: 400;
font-size: 14px;
color: #777;
letter-spacing: .75px;
}
.custom-box strong {
display: block;
font-weight: 400;
font-size: 17px;
color: #1e1e1e;
letter-spacing: 0.25px;
margin-bottom: 5px;
margin-top: 20px;
}
/**** FIM CUSTOM BOX **********************/
/*********** Inicio Listas *****************/
.lista ul {
display: block;
line-height: 1.8;
margin-left: -20px;
}
.lista ul li {
display: block;
position: relative;
}
.lista ul li:not(:last-child) {
margin-bottom: 16px;
}
.lista ul li:before {
content: "";
position: absolute;
top: 1.2em;
left: -30px;
margin-top: -.9em;
background: #9d5bd9;
height: 12px;
width: 12px;
border-radius: 50%;
}
/*
---------------------------------------------
Projects Style
---------------------------------------------
*/
.projects .section-heading {
margin-bottom: 5px;
}
.projects .container-fluid {
padding-left: 0px;
padding-right: 0px;
}
.projects .item {
border-radius: 23px;
overflow: hidden;
}
.projects .item .down-content {
background-color: #fff;
border: 1px solid #f3d7ff;
border-radius: 0px 0px 23px 23px;
padding: 30px;
position: relative;
}
.projects .item .down-content h4 {
font-size: 20px;
color: #2a2a2a;
line-height: 30px;
width: 75%;
}
.projects .item .down-content a {
width: 46px;
height: 46px;
display: inline-block;
line-height: 46px;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
border-radius: 50%;
position: absolute;
right: 30px;
top: 50%;
color: #5b03e4;
transform: translateY(-23px);
}
.projects .owl-nav {
position: absolute;
max-width: 1320px;
top: -126px;
right: 16%;
text-align: right;
}
.projects .owl-nav .owl-prev span,
.projects .owl-nav .owl-next span {
width: 46px;
height: 46px;
line-height: 42px;
font-size: 24px;
display: inline-block;
color: #fff;
background-color: #5b03e4;
border-radius: 50%;
opacity: 0.5;
transition: all .3s;
outline: none;
}
.projects .owl-nav .owl-next span {
margin-left: 15px;
border: none;
}
.projects .owl-nav .owl-prev span:hover,
.projects .owl-nav .owl-next span:hover {
opacity: 1;
}
.owl-next:focus, .owl-prev:focus {outline: none;}
/*******************************************************/
/**** Cards Doenças
/*******************************************************/
.main-container {
padding: 30px;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
margin: 20px;
padding: 20px;
width: 500px;
min-height: 215px;
display: grid;
grid-template-rows: 20px 50px 1fr 50px;
border-radius: 10px;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
transition: all 0.2s;
}
.card i__back{
font-size: 5em;
opacity: 0.2;
}
.card:hover {
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
transform: scale(1.01);
}
.card__link,
.card__exit,
.card__icon {
position: relative;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
}
.card__link{
font-size: 20px;
}
.card__icon__big {
position: absolute;
right: 25px;
bottom: 5px;
color: rgba(255, 255, 255, 0.9);
}
.card__icon__big i{
font-size: 10em;
opacity: 0.2;
}
.card__link::after {
position: absolute;
top: 25px;
left: 0;
content: "";
width: 0%;
height: 3px;
background-color: rgba(255, 255, 255, 0.6);
transition: all 0.5s;
}
.card__link:hover {
width: 130%;
color: rgba(255, 255, 255, 0.9);
}
.card__link:hover::after {
width: 100%;
}
.card__exit {
grid-row: 1/2;
justify-self: end;
}
.card__icon {
grid-row: 2/3;
font-size: 30px;
}
.card__title {
grid-row: 3/4;
font-size: 22px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 400;
color: #ffffff;
}
.card__apply {
grid-row: 4/5;
align-self: center;
}
/* CARD BACKGROUNDS */
.card-1 {
background: radial-gradient(#1fe4f5, #3fbafe);
}
.card-2 {
background: radial-gradient(#fbc1cc, #fa99b2);
}
.card-3 {
background: radial-gradient(#76b2fe, #b69efe);
}
.card-4 {
background: radial-gradient(#60efbc, #58d5c9);
}
.card-5 {
background: radial-gradient(#f588d8, #c0a3e5);
}
/* RESPONSIVE */
@media (max-width: 1600px) {
.cards {
justify-content: center;
}
}
/*******************************************************/
/**** Contador
/*******************************************************/
.counter{
background: #fff;
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
width: 210px;
padding: 0 0 25px;
margin: 0 auto 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
position: relative;
}
.counter:before{
content: "";
background: #fff;
width: 30px;
height: 30px;
border-radius: 5px 0;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.07);
transform: translateX(-50%) rotate(45deg);
position: absolute;
bottom: -15px;
left: 50%;
}
.counter .counter-value{
color: #fff;
background: linear-gradient(to right, #19bbd2, #2778ee);
font-size: 38px;
font-weight: 300;
padding: 0 0 3px;
margin: 0 0 25px;
border-radius: 10px 10px 0 0;
display: block;
}
.counter h3{
color: #2778ee;
font-size: 18px;
font-weight: 900;
letter-spacing: 0.5px;
margin: 0 0 25px;
}
.counter .counter-icon{
color: #fff;
background: linear-gradient(to right, #19bbd2, #2778ee);
font-size: 40px;
line-height: 60px;
width: 65px;
height: 65px;
margin: 0 auto;
border-radius: 10px;
}
.counter.purple .counter-value,
.counter.purple .counter-icon{
background: linear-gradient(to right, #8f70e7, #c452ef);
}
.counter.purple h3{ color: #c452ef; }
.counter.magenta .counter-value,
.counter.magenta .counter-icon{
background: linear-gradient(to right, #e84a94, #ae379b);
}
.counter.magenta h3{ color: #ae379b; }
.counter.green .counter-value,
.counter.green .counter-icon{
background: linear-gradient(to right, #66bd3a, #66bd5f);
}
.counter.green h3{ color: #66bd5f; }
@media screen and (max-width:990px){
.counter{ margin-bottom: 45px; }
}
/*******************************************************/
/** CENTROS */
/*******************************************************/
#news-slider{
margin-top: 80px;
}
.post-slide{
background: #fff;
margin: 20px 15px 20px;
border-radius: 15px;
padding-top: 1px;
box-shadow: 0px 14px 22px -9px #bbcbd8;
}
.post-slide .post-img{
position: relative;
overflow: hidden;
border-radius: 10px;
margin: -12px 15px 8px 15px;
margin-left: -10px;
}
.post-slide .post-img img{
width: 100%;
height: 185px;
transform: scale(1,1);
transition:transform 0.2s linear;
}
.post-slide:hover .post-img img{
transform: scale(1.1,1.1);
}
.post-slide .over-layer{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
opacity:0;
background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);
transition:all 0.50s linear;
}
.post-slide:hover .over-layer{
opacity:1;
text-decoration:none;
}
.post-slide .over-layer i{
position: relative;
top:45%;
text-align:center;
display: block;
color:#fff;
font-size:25px;
}
.post-slide .post-content{
background:#fff;
padding: 2px 20px 40px;
border-radius: 15px;
}
.post-title{
height: 40px;
}
.post-slide .post-title a{
font-size:15px;
font-weight:bold;
color:#333;
display: inline-block;
text-transform:uppercase;
transition: all 0.3s ease 0s;
}
.post-slide .post-title a:hover{
text-decoration: none;
color:#3498db;
}
.post-slide .post-description{
line-height:24px;
color:#808080;
font-size: 12px;
padding-top: 15px;
margin-bottom:25px;
text-align: justify;
height: 135px;
}
.post-slide .post-local{
color:#a9a9a9;
font-size: 14px;
}
.post-slide .post-local i{
font-size:20px;
margin-right:8px;
color: #CFDACE;
}
.post-slide .read-more{
padding: 7px 10px;
float: right;
font-size: 12px;
background: #8261ee;
color: #ffffff;
box-shadow: 0px 10px 20px -10px #8261ee;
border-radius: 10px;
text-transform: uppercase;
}
.post-slide .read-more:hover{
background: #ff589e ;
text-decoration:none;
color:#fff;
}
.owl-theme .custom-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.owl-theme .custom-nav .owl-prev,
.owl-theme .custom-nav .owl-next {
position: absolute;
height: 100px;
color: inherit;
background: none;
border: none;
z-index: 300;
}
.owl-theme .custom-nav .owl-prev:hover{
background: #ff589e;
}
.owl-theme .custom-nav .owl-next:hover{
background: #ff589e;
}
.owl-theme .custom-nav .owl-prev i,
.owl-theme .custom-nav .owl-next i{
font-size: 2.5rem;
color: #cecece;
}
.owl-prev {
left: -10px;
}
.owl-next {
right: -10px;
}
.owl-carousel{
margin-top: 0;
}
.owl-theme .custom-nav .owl-carousel .owl-nav {
overflow: hidden;
height: 0px;
}
.owl-theme .owl-dots button.owl-dot {
border: none;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: #8261ee;
}
.owl-dots button.owl-dot:active {
outline: none;
}
.owl-carousel .item {
text-align: center;
}
.owl-theme .owl-nav [class*=owl-] {
color: #ffffff;
background: #8261ee;
border-radius: 3px;
z-index: 1;
}
.owl-carousel .prev-carousel:hover {
background-position: 0px -53px;
}
.owl-carousel .next-carousel:hover {
background-position: -24px -53px;
}
/*****************************************************/
/* Cards Saiba Mais
/*****************************************************/
.a-box {
display: inline-block;
width: 240px;
text-align: center;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
position: relative;
margin-bottom: 30px;
}
.img-container {
height: 230px;
width: 200px;
overflow: hidden;
border-radius: 0px 0px 20px 20px;
display: inline-block;
}
.img-container img {
transform: skew(0deg, -13deg);
height: 250px;
margin: -35px 0px 0px -70px;
}
.inner-skew {
display: inline-block;
border-radius: 20px;
overflow: hidden;
padding: 0px;
transform: skew(0deg, 13deg);
font-size: 0px;
margin: 30px 0px 0px 0px;
background: #c8c2c2;
height: 250px;
width: 200px;
}
.text-container {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
padding: 120px 20px 20px 20px;
border-radius: 20px;
background: #fff;
margin: -120px 0px 0px 0px;
line-height: 19px;
font-size: 14px;
}
.text-container h3 {
margin: 20px 0px 10px 0px;
color: #04bcff;
font-size: 18px;
}
/*****************************************************/
/* Cards Projeto
/*****************************************************/
.projeto-card {
position: relative;
display: flex;
flex-direction: column;
margin: 1rem auto;
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .66);
transition: box-shadow 0.2s ease, transform 0.2s ease;
margin-bottom: 40px;
border: 2px solid #ddd;
border-radius: 10px;
background: #fff;
line-height: 1.4;
font-family: sans-serif;
overflow: hidden;
cursor: pointer;
z-index: 0;
}
.projeto-card:hover {
box-shadow: 0 34px 32px -33px rgba(0, 0, 0, .18);
}
.projeto-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.07;
}
/*******************************************/
/*** conteúdo de texto *****/
/*******************************************/
.projeto-card-bar {
left: -2px;
width: 50px;
height: 5px;
margin: 10px 0;
border-radius: 5px;
background-color: #424242;
transition: width 0.2s ease;
}
.projeto-card-bar.azul {
background-color: var(--azul_opcional);
}
.projeto-card-bar.verde {
background-color: var(--verderaras);
}
.projeto-card-bar.rosa {
background-color: var(--rosararas);
}
.projeto-card-bar.roxo {
background-color: var(--color-secondary);
}
.projeto-card .projeto-card-imagem {
position: relative;
height: 200px;
z-index: 0;
}
.projeto-card .photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
transition: transform 0.2s ease;
}
.projeto-card .projeto-card-conteudo {
padding: 1rem;
background: #fff;
}
.projeto-card-title {
font-family: 'Voces', 'Open Sans', arial, sans-serif;
font-size: 24px;
}
.projeto-card-subtitle {
font-family: 'Voces', 'Open Sans', arial, sans-serif;
color: #888;
}
.projeto-card-texto {
z-index: 10;
font-size: 15px;
color: #424242;
height: 125px;
overflow: hidden;
text-overflow: ellipsis;
}
.projeto-card-tagbox {
position: absolute;
bottom: 3%;
font-size: 14px;
cursor: default;
user-select: none;
pointer-events: none;
}
.projeto-card-tag {
display: inline-block;
background: #E0E0E0;
color: #777;
border-radius: 3px 0 0 3px;
line-height: 26px;
padding: 0 10px 0 23px;
position: relative;
margin-right: 20px;
cursor: default;
user-select: none;
transition: color 0.2s;
}
.projeto-card-tag::before {
content: '';
position: absolute;
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
height: 6px;
left: 10px;
width: 6px;
top: 10px;
}
.projeto-card-tag::after {
content: '';
position: absolute;
border-bottom: 13px solid transparent;
border-left: 10px solid #E0E0E0;
border-top: 13px solid transparent;
right: -10px;
top: 0;
}
.projeto-card-link{
position: relative;
text-decoration: none;
color: rgba(0, 0, 0, 0.9);
font-size: 20px;
}
.projeto-card-link::after {
position: absolute;
top: 20px;
left: 0;
content: "";
width: 0%;
height: 3px;
transition: all 0.5s;
}
.projeto-card-link:hover {
width: 130%;
color: rgba(0, 0, 0, 0.9);
}
.projeto-card-link:hover::after {
width: 100%;
}
.azul::after {
background-color: var(--azul_opcional);
}
.rosa::after {
background-color:var(--rosararas);
}
.verde::after {
background-color:var(--verderaras);
}
.roxo::after {
background-color:var(--color-secondary);
}
@media (min-width: 640px) {
.projeto-card {
flex-direction: row;
width: 100%;
height: 300px;
position: relative;
margin-bottom: 40px;
border-radius: 10px;
background-color: #fff;
border: 2px solid #ddd;
font-size: 18px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .66);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.projeto-card:nth-child(even) {
flex-direction: row-reverse;
background-color: #fff;
}
.projeto-card:hover {
box-shadow: 0 34px 32px -33px rgba(0, 0, 0, .18);
transform: translate(0px, -3px);
}
.projeto-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.07;
}
.projeto-card .projeto-card-imagem {
height: 300px;
width: 400px;
top: 0;
left: 0;
transition: transform 0.2s ease;
}
.projeto-card:hover .photo {
transform: scale(1.05) rotate(2.5deg);
}
.projeto-card-conteudo {
position: absolute;
top: 7%;
bottom: 7%;
left: 430px;
width: calc(100% - 470px);
font-size: 17px;
}
.projeto-card:nth-child(even) .projeto-card-conteudo {
left: initial;
right: 430px;
}
.projeto-card-conteudo::before,
.projeto-card-conteudo::after {
content: "";
position: absolute;
display: block;
background: #ff0000bb;
background: #fff;
top: -20%;
left: -55px;
height: 140%;
width: 60px;
transform: rotate(8deg);
}
.projeto-card:nth-child(2n) .projeto-card-conteudo::before {
display: none;
}
.projeto-card-conteudo::after {
display: none;
left: initial;
right: -55px;
}
.projeto-card:nth-child(2n) .projeto-card-conteudo::after {
display: block;
}
.projeto-card-conteudo * {
position: relative;
}
}
/**************************************************/
/**** Modais ****/
/**************************************************/
:root {
--bg-clr: #00599f;
--white: #fff;
--text-clr: #706f6f;
--success-clr: #3cb878;
--success-hvr: #059249;
--error-clr: #fd5664;
--error-hvr: #ff0016;
--cancel-clr: #d4d9e5;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.modal-button {
display: block;
width: 160px;
border: 2px solid transparent;
padding: 12px 15px;
border-radius: 3px;
color: var(--white);
cursor: pointer;
transition: background 0.5s ease;
}
.modal_btns button.success_btn {
margin-right: 10px;
}
.modal-button.success_btn {
background: var(--success-clr);
}
.modal-button.error_btn {
background: var(--error-clr);
}
.modal-button.success_btn:hover {
background: var(--success-hvr);
}
.modal-button.error_btn:hover {
background: var(--error-hvr);
}
.modal_wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
.modal_wrapper .shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.5s ease;
}
.modal_wrapper .modal {
width: 400px;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
padding-left: 15px;
padding-right: 15px;
}
.modal_wrapper .modal .modal_item{
width: 100%;
background: var(--white);
position: relative;
display: none;
border-top-left-radius: 20px;
border-top-right-radius:20px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.modal_item .modal_body{
padding: 35px;
text-align: center;
}
.modal_item .modal_body .s_icon{
width: 60px;
height: 60px;
background: var(--success-clr);
color: var(--white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
margin: 0 auto 35px;
}
.modal_item.e_modal .modal_body .s_icon{
background: var(--error-clr);
}
.modal_item.s_modal .modal_body .s_text h2{
color: var(--success-clr);
}
.modal_item.e_modal .modal_body .s_text h2{
color: var(--error-clr);
}
.modal_item .modal_body .s_text p{
margin-top: 5px;
}
.modal_item .close{
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: var(--white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
cursor: pointer;
transition: background 0.5s ease;
}
.modal_item.s_modal .close:hover{
background: var(--success-clr);
color: var(--white);
}
.modal_item.e_modal .close:hover{
background: var(--error-clr);
color: var(--white);
}
.modal_item .s_button button{
width: 100%;
border-radius: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* Adicione este CSS para remover a borda preta ao clicar no botão */
.modal-button:focus,
.modal-button:active {
outline: none;
border: 2px solid transparent;
}
.modal_wrapper.active{
visibility: visible;
}
.modal_wrapper.active .shadow{
opacity: 1;
transition: all 0.2s ease;
}
.modal_item.s_modal.active,
.modal_item.e_modal.active{
display: block;
}
/***************************************************************/
/* MODAL POPUP */
/***************************************************************/
.modal-popup-overlay {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.modal-popup-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-popup {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: #fff;
max-height: calc(100vh - 200px);
padding: 5px;
border-radius: 20px;
opacity: 0;
overflow: hidden;
visibility: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.modal-popup.active {
opacity: 1;
visibility: visible;
}
.modal-popup-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-popup-content img {
max-width: calc(100vh - 410px);
width: auto;
height: auto;
border-radius: 20px;
object-fit: contain;
}
.close-modal-popup {
position: absolute;
top: 20px; /* Distância do topo */
right: 20px; /* Distância da direita */
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
transition: background-color 0.3s ease;
z-index: 1001; /* Certifica-se de que o botão de fechar esteja na frente do modal */
}
.close-modal-popup:hover {
background-color: rgba(255, 255, 255, 0.8);
}
.close-modal-popup svg {
width: 20px;
height: 20px;
fill: #ffffff; /* Cor do ícone */
}
/* Estilos para dispositivos móveis */
@media (max-width: 767px) {
.modal-popup-overlay {
position: fixed;
padding: 10px;
z-index: 2000;
}
.modal-popup {
position: relative;
border-radius: 20px;
overflow: auto;
background-color: #fff;
max-width: calc(100vw - 20px); /* Reduzimos 20px para acomodar o padding do modal */
max-height: calc(100vh - 20px); /* Reduzimos 20px para acomodar o padding do modal */
}
.modal-popup-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
position: relative;
border-radius: 20px;
overflow-x: hidden;
}
.modal-popup-content img {
max-width: calc(100vw - 20px); /* Reduzimos 20px para acomodar o padding do modal */
max-height: calc(100vh - 20px); /* Reduzimos 20px para acomodar o padding do modal */
width: auto;
height: auto;
border-radius: 20px;
object-fit: contain;
}
.close-modal-popup {
position: absolute;
top: 10px; /* Distância do topo */
right: 10px; /* Distância da direita */
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
transition: background-color 0.3s ease;
z-index: 1001; /* Certifica-se de que o botão de fechar esteja na frente do modal */
}
.close-modal-popup:hover {
background-color: rgba(255, 255, 255, 0.8);
}
.close-modal-popup svg {
width: 20px;
height: 20px;
fill: #000000; /* Cor do ícone */
}
}
/***************************************************************/
/* Mapa dos centros */
/***************************************************************/
.envia-para-tras-10{
z-index: -10;
}
.centraliza-legenda{
display: flex;
align-items: center;
justify-content: center;
}
.titulo-sub-section{
color: #000;
font-weight: 600;
font-size: 16px;
line-height: 28px;
letter-spacing: 1px;
}
.titulo-sub-section-rosa{
color: var(--rosararas);
font-weight: 600;
font-size: 16px;
line-height: 28px;
letter-spacing: 1px;
}
.legenda-azul{
color: #4682b4;
font-weight: 500;
font-size: 14px;
line-height: 28px;
letter-spacing: 1px;
}
.legenda-rosa{
color: #bf40bf;
font-weight: 500;
font-size: 14px;
line-height: 28px;
letter-spacing: 1px;
}
.legenda-preta{
color: hsl(0, 0%, 34%) ;
font-weight: 500;
font-size: 14px;
line-height: 28px;
letter-spacing: 1px;
}
.mapa-centros {
display: flex;
align-items: center;
justify-content: center;
position: relative; /* Adicione esta linha */
}
#mapa-centros-element {
position: relative; /* Certifique-se de que a posição seja definida como "relative" */
z-index: 1; /* Um valor menor do que o menu */
}
.rounded-content {
border-radius: 15px; /* Adjust the pixel value to control the roundness */
}
/********************************************/
/** Apoio **/
/********************************************/
.apoio-260 {
height: 260px; /* Altura da div */
}
.apoio-120 {
height: 120px; /* Altura da div */
}
.horizontal-center {
text-align: center; /* Centraliza horizontalmente o conteúdo */
}
.apoio {
width: 150px;
height: 150px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.apoio img {
max-width: 100%; /* Define a largura máxima como 100% da div 'apoio' */
max-height: 100%; /* Define a altura máxima como 100% da div 'apoio' */
display: block;
margin: 0 auto;
object-fit: contain;
}
.apoio p {
padding-top:10px;
text-align: center;
}
.apoio-menor {
width: 150px;
height: 50px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.apoio-menor img {
max-width: 100%; /* Define a largura máxima como 100% da div 'apoio' */
max-height: 100%; /* Define a altura máxima como 100% da div 'apoio' */
display: block;
margin: 0 auto;
object-fit: contain;
}
.apoio-menor p {
padding-top:10px;
text-align: center;
}
/*
.horizontal-center{
display: flex;
justify-content: center;
align-items: center;
}
.apoio img {
}*/
/********************************************************/
/* Botão para abrir o streamlit */
/********************************************************/
.btn-app {
--color: var(--color-secondary);
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: all .5s;
border: none;
background-color: transparent;
}
.btn-app div {
letter-spacing: 2px;
font-weight: bold;
background: var(--color);
border-radius: 2rem;
color: white;
padding: 1rem;
}
.btn-app::before {
content: '';
z-index: -1;
background-color: var(--color);
border: 2px solid white;
border-radius: 2rem;
width: 110%;
height: 110%;
position: absolute;
/*transform: rotate(10deg);*/
transition: .5s;
opacity: 0.2;
}
.btn-app:hover {
cursor: pointer;
filter: brightness(1.2);
transform: scale(1.1);
}
.btn-app:hover::before {
transform: rotate(0deg);
opacity: 1;
}
.btn-app svg {
transform: translateX(-200%);
transition: .5s;
width: 0;
opacity: 0;
}
.btn-app:hover svg {
width: 25px;
transform: translateX(0%);
opacity: 1;
}
.btn-app:active {
filter: brightness(1.4);
}
/********************************************************/
/* Cards de Publicações */
/********************************************************/
.publicacao {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.publicacao-card {
width: 320px;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(243, 244, 246);
border-radius: 0.5rem;
padding: 1rem;
background-color: #fff;
height: 500px; /* Altura fixa */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px; /* Espaçamento na parte inferior em versões mobile */
}
/* Para versões móveis, você pode adicionar um media query */
@media (max-width: 768px) {
.publicacao {
justify-content: center; /* Centraliza horizontalmente em versões móveis */
}
.publicacao-card {
width: 90%; /* Define uma largura maior em versões móveis */
height: auto; /* Remove a altura fixa */
}
.description {
margin-bottom: 20px ;
}
}
.header, .post-info {
padding: 1rem;
}
.header {
display: flex;
justify-content: space-between;
grid-gap: 1rem;
gap: 1rem;
align-items: flex-start; /* Alinhar header ao topo */
}
.title {
font-size: 1.125rem;
line-height: 1.25rem;
font-weight: 700;
text-align: left;
color: rgba(17, 24, 39, 1);
text-decoration: none;
max-height: 120px; /* Altura máxima de 4 linhas de texto */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* Limita a 4 linhas */
-webkit-box-orient: vertical;
}
.title_nolink {
font-size: 1.125rem;
line-height: 1.25rem;
font-weight: 700;
text-align: left;
color: rgba(17, 24, 39, 1);
text-decoration: none;
max-height: 120px; /* Altura máxima de 4 linhas de texto */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* Limita a 4 linhas */
-webkit-box-orient: vertical;
}
.title:hover {
text-decoration: underline royalblue;
}
.name {
margin-top: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
text-align: left;
color: rgba(75, 85, 99, 1);
max-height: 3rem; /* Altura máxima de 3 linhas */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* Limita a 3 linhas */
-webkit-box-orient: vertical;
}
.image {
display: block;
flex-shrink: 0;
height: 3rem;
width: 3rem;
border-radius: 0.5rem;
object-fit: cover;
}
.image.azul {
background-color: var(--azul_opcional);
}
.image.verde {
background-color: var(--verderaras);
}
.image.rosa {
background-color: var(--rosararas);
}
.image.roxo {
background-color: var(--color-secondary);
}
.white-icon {
color: white; /* Torna o ícone branco */
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 24px; /* Tamanho do ícone */
width: 3rem; /* Largura fixa */
height: 3rem; /* Altura fixa */
}
.description {
margin-top: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: rgba(107, 114, 128, 1);
display: -webkit-box;
-webkit-line-clamp: 10; /* Define o número máximo de linhas */
-webkit-box-orient: vertical;
text-align: justify; /* Justificar o texto */
overflow: hidden;
}
.post-info {
margin-top: auto; /* Mover para a parte inferior */
display: flex;
grid-gap: 1rem;
gap: 1rem;
height: 30px;
justify-content: space-between;
}
.cr {
display: flex;
flex-direction: column-reverse;
}
.dt {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: rgba(75, 85, 99, 1);
}
.dd {
font-size: 1rem;
line-height: 1rem;
color: rgba(107, 114, 128,1);
}
.font-roxo{
color: var(--color-secondary);
}
.footer {
display: flex;
flex-direction: column;
margin-top: auto;
}
.tag_pub_title {
color: #a9a9a9;
font-size: 14px;
}
.tag_pub {
color: #a9a9a9;
font-size: 16px;
}
.action {
padding: 7px 10px;
font-size: 12px;
background: #8261ee;
color: #ffffff;
box-shadow: 0px 10px 20px -10px #8261ee;
border-radius: 10px;
text-transform: uppercase;
display: inline-block;
text-align: center;
cursor: pointer;
}
.action:hover {
background: #ff589e;
text-decoration: none;
color: #fff;
}
.tag_pub{
color:#a9a9a9;
font-size: 16px;
}
.tag_pub_title{
color: #565656;;
font-size: 14px;
font-weight: 500;
}
.tag_pub i{
font-size:20px;
margin-right:8px;
}
.row-footer {
display: flex;
flex-direction: row;
margin-top: 0;
padding: 0;
}
.col-footer {
flex: 1;
margin: 0;
}
.centraliza {
display: flex;
justify-content: center;
align-items: center; /
}
/***************************************************************/
/*** Quem somos */
/***************************************************************/
.our-team {
padding: 30px 0 40px;
height: 380px;
margin-bottom: 30px;
background-color: #fff;
text-align: center;
overflow: hidden;
position: relative;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.our-team .posicao {
display: block;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
position: absolute;
bottom: 60px;
left: 0;
right: 0;
}
.our-team .picture {
display: inline-block;
height: 130px;
width: 130px;
margin-bottom: 50px;
z-index: 1;
position: relative;
background-color: transparent; /* Remova a cor de fundo padrão */
}
.our-team .picture img {
width: 100%;
height: 100%;
object-fit: cover; /* Ajusta a imagem ao tamanho da div e mantém sua proporção */
border-radius: 50%;
transition: all 0.9s ease 0s;
}
.our-team .picture::before {
content: "";
width: 100%;
height: 0;
border-radius: 50%;
background-color: transparent; /* Remova a cor de fundo padrão */
position: absolute;
bottom: 135%;
right: 0;
left: 0;
opacity: 0.9;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team.azul .picture::before {
background-color: var(--azul_opcional);
}
.our-team.rosa .picture::before {
background-color: var(--rosararas);
}
.our-team.verde .picture::before {
background-color: var(--verderaras);
}
.our-team.roxo .picture::before {
background-color: var(--color-secondary);
}
.our-team:hover .picture::before {
height: 100%;
}
.our-team .picture::after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background-color: transparent; /* Remova a cor de fundo padrão */
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.our-team.azul .picture::after {
background-color: var(--azul_opcional);
}
.our-team.rosa .picture::after {
background-color: var(--rosararas);
}
.our-team.verde .picture::after {
background-color: var(--verderaras);
}
.our-team.roxo .picture::after {
background-color: var(--color-secondary);
}
.our-team:hover .picture img {
box-shadow: 0 0 0 14px #f7f5ec;
transform: scale(0.7);
}
.our-team .social {
width: 100%;
padding: 0;
margin: 0;
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease 0s;
}
.our-team.azul .social {
background-color: var(--azul_opcional);
}
.our-team.rosa .social {
background-color: var(--rosararas);
}
.our-team.verde .social {
background-color: var(--verderaras);
}
.our-team.roxo .social {
background-color: var(--color-secondary);
}
.our-team:hover .social {
bottom: 0;
}
.our-team .social li {
display: inline-block;
}
.our-team .social li a {
display: block;
padding: 10px;
font-size: 30px;
color: white;
transition: all 0.3s ease 0s;
text-decoration: none;
}
.our-team .social li a:hover {
color: transparent;
background-color: #f7f5ec;
}
.our-team.azul .social li a:hover {
color: var(--azul_opcional);
background-color: #f7f5ec;
}
.our-team.verde .social li a:hover {
color: var(--verderaras);
background-color: #f7f5ec;
}
.our-team.rosa .social li a:hover {
color: var(--rosararas);
background-color: #f7f5ec;
}
.our-team.roxo .social li a:hover {
color: var(--color-secondary);
background-color: #f7f5ec;
}
/********************************************************************/
/* Accordion */
/********************************************************************/
.acc {
position: relative;
background-color: #fff;
}
.acc dl {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.acc dl:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #7047f5
}
.acc dt > a {
text-align: center;
font-weight: 300;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
}
.acc dd {
background-color: #fff;
font-size: 1em;
line-height: 1.5em;
/*background-image: linear-gradient(to bottom, #444 0%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
}
.acc dd > .row {
padding: 4em 4em 4em 4em;
}
.acc_title {
background-color: #8261ee;
border-bottom: #7047f5;
}
.acc_title:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
/*transition: transform 0.3s ease-in-out;*/
}
.acc_title:hover {
background-color: var(--rosararas);
}
.acc_title_active {
background-color: var(--rosararas);
}
.acc_title_active:before {
transform: rotate(-225deg);
}
.acc_panel {
overflow: hidden;
}
@media all {
.acc_panel {
max-height: none;
transition: max-height 1s;
}
}
@media screen and (min-width: 48em) {
.acc_panel {
max-height: none;
}
}
.acc_panel_col {
max-height: 0;
}
.anim_in {
-webkit-animation-name: acc_in;
animation-name: acc_in;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.anim_out {
-webkit-animation-name: acc_out;
animation-name: acc_out;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
@-webkit-keyframes acc_in {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes acc_in {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes acc_out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
@keyframes acc_out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
/****************************************************/
/* Player YT */
/****************************************************/
.video-container {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding-bottom: 50px;
}
iframe {
width: 560px;
height: 315px;
}
/***********************************************************/
/* Barra superior fixa */
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: white;
z-index: 1000; /* Certifique-se de que o z-index seja alto o suficiente */
display: flex;
justify-content: flex-end; /* Alinha o conteúdo à direita */
align-items: center;
padding: 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: visible; /* Permite o conteúdo "transbordar" além da barra */
}
.contents, header {
margin-top: 50px; /* Altura da barra */
}
/* Estilo do seletor de idioma */
.language-selector {
position: relative;
display: inline-block;
}
/* Bandeiras no select */
.language-select .filter-option-inner-inner {
display: flex;
align-items: center;
}
.flag-icon {
margin-right: 8px;
}
.language-access {
display: flex;
align-items: center;
}
.btn-access {
background-color: #ff589e;
color: #fff;
padding: 0.5rem 1rem;
text-decoration: none;
border-radius: 0.5rem;
border: none;
transition: background-color 0.3s ease;
margin-left: 15px;
}
.btn-access:hover {
background-color: #e14c8a;
cursor: pointer;
}
/* Garante que o dropdown do select transborde além da barra */
.dropdown-menu {
z-index: 1050; /* Certifique-se de que o z-index seja maior que o da barra */
}
/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
.top-bar {
justify-content: space-between; /* Alinha o conteúdo em lados opostos */
}
.language-access {
display: flex;
justify-content: space-between;
width: 100%;
}
.language-select {
margin-right: 0; /* Remove o espaçamento no mobile */
width: 50%; /* Ajusta o combo para 50% do container */
}
.btn-access {
width: 40%; /* Ajusta o botão para 40% do container */
text-align: center;
}
}
/* Ajuste padrão para as imagens no desktop */
.logo-img {
max-width: 112px;
height: auto;
}
/* Ajuste SOMENTE no Mobile */
@media (max-width: 768px) {
.logo-img {
max-width: 46px; /* Define a largura da imagem no mobile */
height: auto;
}
}
/*****************************************************************/
/**************************************************/
/*** Modais do Centros ***/
/**************************************************/
.modal-centro-overlay {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.6s, visibility 0.6s;
}
.modal-centro-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-centro {
background-color: #fff;
width: 90%;
height: 90%;
max-width: 1200px; /* Ajustado para tamanho de tela */
padding: 25px;
border-radius: 20px;
overflow-y: auto; /* Somente rolagem vertical se necessário */
visibility: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transform: scale(1.2);
transition: all 0.6s;
}
.modal-centro.active {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.close-modal-centro {
position: absolute;
top: 5px;
right: 15px;
cursor: pointer;
opacity: 0;
transition: opacity 0.6s, transform 0.6s;
}
.modal-centro.active .close-modal-centro {
transform: translateY(0);
opacity: 1;
}
.modal-centro .close-modal-centro svg {
width: 25px;
height: 25px;
}
.modal-centro-content {
opacity: 0;
transition: opacity 0.6s;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}
.modal-centro.active .modal-centro-content {
opacity: 1;
}
.titulo-row {
margin-bottom: 1rem;
overflow: hidden;
}
.content-row {
display: flex;
flex: 1; /* Preenche o espaço disponível */
overflow: auto; /* A barra de rolagem aparece aqui se o conteúdo transbordar */
}
.content-row.row {
margin-right: 0;
margin-left: 0;
}
/* Estilos para o título */
.titulo-centro-modal {
width: 100%; /* Garante que o título ocupe 100% da largura disponível */
text-align: center;
margin-bottom: 1rem; /* Espaçamento entre o título e o restante do conteúdo */
}
.titulo-centro-modal h3 {
font-size: 30px;
font-weight: 600;
margin-bottom: 10px;
}
.titulo-centro-modal h6 {
font-size: 18px;
font-weight: 400;
color: #6c757d;
}
.centro-info-col {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
}
.centro-info-avatar {
flex: 0 0 60%; /* Define a altura para 60% da altura do contêiner pai */
max-height: 60%; /* Reforça a altura máxima para evitar overflow */
width: 100%; /* Usa toda a largura disponível */
overflow: hidden;
position: relative;
display: flex;
align-items: center; /* Centraliza a imagem verticalmente */
justify-content: center;
margin-bottom: 15px;
}
.centro-info-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 25px;
}
.centro-info-text {
flex: 0 0 40%;
width: 100%;
overflow: hidden;
}
.centro-info-list .row {
margin: 0;
width: 100%;
}
.centro-info-list .col-md-3,
.centro-info-list .col-md-9 {
padding-left: 0;
padding-right: 0;
}
.centro-info-list label {
font-weight: 700;
margin: 0;
text-align: right;
}
.alinha-direita {
text-align: right;
width: 100%;
}
.centro-info-list .row > .col-md-3 {
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 10px;
}
.centro-info-list .row > .col-md-9 {
display: flex;
align-items: center;
}
@media (max-width: 767px) {
.modal-centro {
overflow-y: auto; /* Habilita a barra de rolagem vertical somente em telas menores */
}
.centro-info-col {
flex: 0 0 100%; /* Faz cada coluna ocupar 100% da largura em dispositivos móveis */
max-width: 100%;
margin-bottom: 10px; /* Adiciona espaçamento inferior entre colunas */
min-height:560px;
}
.centro-info-avatar {
max-height: none; /* Remove restrição de altura */
height: auto; /* Permite ajuste baseado no conteúdo */
}
.centro-info-text{
height:570px;
}
.centro-info-list .row > .col-md-3 {
justify-content: flex-start; /* Alinha os rótulos à esquerda */
text-align: left; /* Alinha o conteúdo textual à esquerda */
padding-right: 0; /* Remove o padding direito */
}
.centro-info-list .row > .col-md-9 {
justify-content: flex-start; /* Alinha spans e textos à esquerda */
text-align: left;
}
.alinha-direita {
text-align: left; /* Sobrescreve o alinhamento à direita no mobile */
}
}
/* Slider container */
.slider-container {
position: relative;
width: 100%;
overflow: hidden; /* Impede o vazamento dos slides */
height: 100%; /* Garante que o slider ocupe 100% da altura disponível */
}
/* Slider wrapper */
.slider-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
width: 200%; /* O wrapper ocupa 200% para acomodar dois slides */
height: 100%; /* O wrapper ocupará 100% da altura do container */
}
/* Cada slide */
.slide {
width: 50%; /* Cada slide ocupará 50% da largura do contêiner, pois temos dois slides */
flex-shrink: 0;
padding: 20px;
box-sizing: border-box;
height: 100%;
overflow-y: auto; /* Permite rolagem vertical se necessário */
}
/* Título do slide */
.slide-title {
text-align: center;
margin-bottom: 10px;
}
/* Texto dentro do slide */
.slide p {
max-width: 90%;
margin: 0 auto;
text-align: justify;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Controles de navegação */
.slider-controls .prev, .slider-controls .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
padding: 10px;
cursor: pointer;
background-color: #7047f5;
opacity: .5;
color: white;
z-index: 2;
}
.slider-controls .prev {
left: 0;
}
.slider-controls .next {
right: 0;
}
/* Dots */
.dots {
text-align: center;
margin-top: 10px;
}
.dot {
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
.dot.active {
background-color: #7047f5;
}
/* Customização da barra de rolagem */
.slide::-webkit-scrollbar {
width: 8px;
}
.slide::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.slide::-webkit-scrollbar-thumb {
background-color: #7047f5;
border-radius: 10px;
border: 2px solid #f1f1f1;
}
/********************************************************************/
/*** HANDS ****/
/********************************************************************/
.row-dayrare {
position: relative; /* Necessário para que o canvas se ajuste ao tamanho da div */
z-index: 1; /* Mantém a div acima do canvas */
background: rgba(255, 255, 255, 0.7); /* Fundo semitransparente para manter o efeito */
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Permite adaptação para mobile */
max-width: 100%;
margin-left: 0;
margin-top: 70px;
margin-bottom: 70px;
overflow: hidden; /* Garante que o confete não ultrapasse os limites da div */
}
.row-dayrare .col-lg-3 img {
max-width: 100%;
height: auto;
display: block;
}
.row-dayrare .video iframe {
width: 100%;
height: 315px; /* Ajuste conforme necessário */
}
/* Ocultar os elementos laterais no mobile */
@media (max-width: 768px) {
.row-dayrare .col-lg-3 {
display: none;
}
.row-dayrare .col-lg-6 {
flex: 1 1 100%;
text-align: center;
}
.row-dayrare .video iframe {
height: 250px; /* Ajuste para dispositivos menores */
}
}
/***************************************************************************************************/
.container-card-banner {
padding: 10px 15px 0;
}
.categorycard {
background-color: var(--rosararas);
display: flex;
flex-flow: row nowrap;
padding-left: 40px;
padding-right: 40px;
border-radius: 20px;
height: 320px;
/*border: 3px solid var(--roxoraras);*/
}
.categorycard .categorycard__texto {
color: #fff;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* Deixa o título próximo ao topo */
.categorycard .categorycard__titulo {
margin-top: 0;
padding-top: 15px;
padding-bottom: 15px;
font-size: 1.8em;
}
/* Ajusta o texto */
.categorycard .categorycard__description {
color: #fff;
font-size: 1.0em;
flex-grow: 1;
padding-right: 90px;
}
.categorycard .btn-moreinfo {
align-self: flex-start;
margin-top: auto;
margin-bottom: 20px;
}
.categorycard .categorycard__imagen {
flex: 12 1 auto;
transform: scale(1.3);
}
.categorycard .categorycard__imagen .categorycard__imagen_src {
width: auto;
height: 300px;
/*max-height: 360px ;*/
}
.btn-card-banner {
background-color: #FFFFFF;
color: #ff589e;
padding: 0.5rem 1rem;
width: 200px;
text-decoration: none;
border-radius: 0.5rem;
border: none;
transition: background-color 0.3s ease;
margin-left: 15px;
margin-bottom: 35px;
}
.btn-card-banner:hover {
background-color: #dfdfdf;
cursor: pointer;
}
/* ====== 🔹 RESPONSIVIDADE PARA MOBILE 🔹 ====== */
@media (max-width: 768px) {
.categorycard {
flex-direction: column; /* Empilhar os elementos verticalmente */
height: auto;
padding: 20px;
text-align: center;
}
.categorycard .categorycard__titulo {
font-size: 1.5em; /* Reduzir o tamanho do título */
padding-bottom: 10px;
}
.categorycard .categorycard__description {
font-size: 0.95em;
padding-right: 0; /* Remover espaçamento lateral */
}
.categorycard .categorycard__imagen {
transform: scale(1); /* Reduzir o tamanho da imagem para caber na tela */
margin-top: 15px;
}
.categorycard .categorycard__imagen .categorycard__imagen_src {
height: 200px; /* Ajustar altura da imagem */
max-width: 100%;
}
.categorycard .btn-moreinfo {
align-self: center; /* Centralizar o botão */
margin-top: 15px;
}
.btn-card-banner {
width: 100%; /* Botão ocupa toda a largura disponível */
max-width: 250px;
margin: 15px auto;
}
}
/******************************************************************************/
/************* Texto dia mundial doenças raras -----------------------------*/
.title-wrapper {
display: grid;
align-items: center;
justify-content: center;
transform: skew(0, -10deg);
}
.top-title {
order: 1;
text-align: center;
display: block;
color: 0;
font-size: clamp(2rem, 6vw, 3.5rem);
margin-bottom: 1rem;
padding-right: 2rem;
}
.bottom-title {
order: 3;
text-align: center;
display: block;
color: #000;
font-size: clamp(1rem, 4vw, 1.5rem);
margin-top: 2rem;
padding-left: 2rem;
}
.sweet-title {
order: 2;
color: #fde9ff;
font-weight: 900;
text-transform: uppercase;
font-size: clamp(3rem, 10vw, 6rem);
line-height: 0.75em;
text-align: center;
text-shadow: 3px 1px 1px #4af7ff, 2px 2px 1px #165bfb, 4px 2px 1px #4af7ff, 3px 3px 1px #165bfb, 5px 3px 1px #4af7ff, 4px 4px 1px #165bfb, 6px 4px 1px #4af7ff, 5px 5px 1px #165bfb, 7px 5px 1px #4af7ff, 6px 6px 1px #165bfb, 8px 6px 1px #4af7ff, 7px 7px 1px #165bfb, 9px 7px 1px #4af7ff;
}
.sweet-title span {
display: block;
position: relative;
}
.sweet-title span:before {
content: attr(data-text);
position: absolute;
text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9, -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;
z-index: 1;
}
.sweet-title span:nth-child(1) {
padding-right: 2.25rem;
}
.sweet-title span:nth-child(2) {
padding-left: 2.25rem;
}
.grow-link {
text-decoration: none; /* Remove sublinhado */
color: inherit; /* Mantém a cor original do texto */
display: inline-block; /* Evita que o link quebre a estrutura */
transition: transform 0.3s ease-in-out; /* Animação suave */
}
.grow-link:hover {
text-decoration: none; /* Remove sublinhado */
color: inherit; /* Mantém a cor original do texto */
display: inline-block; /* Evita que o link quebre a estrutura */
transform: scale(1.05); /* Aumenta levemente o tamanho */
}
/* ====== 🔹 RESPONSIVIDADE PARA MOBILE 🔹 ====== */
@media (max-width: 768px) {
.title-wrapper {
transform: none; /* Remove o skew no mobile para evitar distorção */
padding: 10px;
}
.top-title {
font-size: clamp(1.8rem, 5vw, 2.8rem);
padding-right: 0;
margin-bottom: 0.5rem;
}
.bottom-title {
font-size: clamp(0.9rem, 3.5vw, 1.3rem);
padding-left: 0;
margin-top: 1rem;
}
.sweet-title {
font-size: clamp(2.5rem, 8vw, 4.5rem);
text-shadow: 2px 1px 1px #4af7ff, 1px 1px 1px #165bfb, 3px 2px 1px #4af7ff;
}
.sweet-title span:nth-child(1),
.sweet-title span:nth-child(2),
.sweet-title span:nth-child(3),
.sweet-title span:nth-child(4) {
padding: 0;
}
}
#confeti {
position: absolute; /* Agora o canvas só ocupa o espaço da div */
top: 0;
left: 0;
width: 100%; /* Ocupará apenas a largura da div */
height: 100%; /* Ocupará apenas a altura da div */
z-index: 0; /* Mantém o confete atrás do conteúdo */
pointer-events: none; /* Permite interação com os elementos acima */
}
.check-list {
list-style: none;
padding: 0;
margin: 0;
}
.check-list li {
list-style: none;
position: relative;
padding-left: 1.8em; /* Ajusta o espaço para não sobrepor o ícone */
margin-bottom: 10px; /* Define um espaçamento entre os itens */
}
.check-list li::before {
content: "✅";
position: absolute;
left: 0;
top: 0;
font-size: 1.2em; /* Ajusta o tamanho do ícone */
margin-right: 8px;
}
.citation-box {
position: relative;
background: #f5f5f5;
border-left: 4px solid #a759d1;
padding: 16px;
padding-top: 45px;
font-style: italic;
font-size: 1rem;
margin: 16px 0;
border-radius: 6px;
position: relative;
word-wrap: break-word;
}
/* Estiliza o botão de cópia */
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #a759d1;
color: #fff;
border: none;
font-size: 0.6rem;
cursor: pointer;
border-radius: 4px;
height: 35px;
transition: background 0.3s ease;
}
.copy-btn:hover {
background: var(--rosararas);
}
.custom-language-select {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
appearance: none; /* Remove o estilo padrão do navegador */
background-color: white;
}
/* Estiliza a opção para exibir a bandeira */
.custom-language-select option {
padding-left: 30px; /* Dá espaço para a bandeira */
}
/* Exibe a bandeira antes do idioma no seletor */
.custom-language-select option::before {
content: attr(data-icon);
margin-right: 10px;
}
/****************************************************************************/
/* curiosodade dia raras */
.olcards,
.olcards * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.olcards {
list-style: none;
counter-reset: cardCount;
font-family: sans-serif;
display: flex;
flex-direction: column;
--cardsGap: 1rem;
gap: var(--cardsGap);
padding-bottom: var(--cardsGap);
}
.olcards li {
counter-increment: cardCount;
display: flex;
color: white;
--labelOffset: 1rem;
--arrowClipSize: 1.5rem;
margin-top: var(--labelOffset);
}
.olcards li::before {
content: counter(cardCount, decimal-leading-zero);
background: white;
color: var(--cardColor);
font-size: 2em;
font-weight: 700;
transform: translateY(calc(-1 * var(--labelOffset)));
margin-right: calc(-1 * var(--labelOffset));
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
padding-inline: 0.5em;
}
.olcards li .content {
background-color: var(--cardColor);
--inlinePadding: 1em;
--boxPadding: 0.5em;
display: grid;
padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
grid-template-areas:
"icon title"
"icon text";
gap: 0.25em 1em;
clip-path: polygon(
0 0,
calc(100% - var(--arrowClipSize)) 0,
100% 50%,
calc(100% - var(--arrowClipSize)) 100%,
calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
0 calc(100% + var(--cardsGap))
);
position: relative;
width: 100%;
height: auto;
}
.olcards li .content::before {
content: "";
position: absolute;
width: var(--labelOffset);
height: var(--labelOffset);
background: var(--cardColor);
left: 0;
bottom: 0;
clip-path: polygon(0 0, 100% 0, 0 100%);
filter: brightness(0.75);
}
.olcards li .content::after {
content: "";
position: absolute;
height: var(--cardsGap);
width: var(--cardsGap);
background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
left: 0;
top: 100%;
}
.olcards li .icon {
grid-area: icon;
align-self: center;
font-size: 2em;
}
.olcards li .content .title {
grid-area: title;
font-size: 1.25em;
/* font-weight: 700; */
}
.olcards li .content .text {
grid-area: text;
}
/**************************************************************************************************/
/** CARDS OBJETIVOS ***/
.card-category-2 ul, .card-category-3 ul, .card-category-4 ul, .card-category-5 ul .card-category-6 ul {
padding: 0;
}
.card-category-2 ul li, .card-category-3 ul li, .card-category-4 ul li, .card-category-5 ul li, .card-category-6 ul li {
list-style-type: none;
display: inline-block;
vertical-align: top;
}
.card-category-2 ul li, .card-category-3 ul li {
margin: 10px 5px;
}
.card-category-1, .card-category-2, .card-category-3, .card-category-4, .card-category-5, .card-category-6 {
font-family: sans-serif;
margin-bottom: 15px;
text-align: center;
}
.card-category-1 div, .card-category-2 div {
display:inline-block;
}
.card-category-1 > div, .card-category-2 > div:not(:last-child) {
margin: 10px 5px;
text-align: left;
}
.basic-card {
width: 270px;
height:300px;
position: relative;
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center; /* Centraliza o texto */
overflow: hidden; /* Evita que elementos "estourem" o card */
padding: 20px;
}
/* Estilização do conteúdo do card */
.basic-card .card-content {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%; /* Garante que o conteúdo fique centralizado */
}
/* Ajuste do título */
.basic-card .card-title {
font-size: 40px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
/* Estilização do texto */
.basic-card .card-text {
font-size: 18px;
font-style: italic;
line-height: 1.6;
position: relative;
transition: transform 0.3s ease-in-out; /* Transição suave para efeito de grow */
max-height: 100px; /* Limita o tamanho do texto para evitar deslocamento */
display: flex;
align-items: center;
justify-content: center;
}
/* Adiciona aspas estilizadas no início e fim do texto */
.basic-card .card-text::before {
content: "“";
font-size: 24px;
font-weight: bold;
color: white; /* Agora as aspas são brancas */
margin-right: 5px;
}
.basic-card .card-text::after {
content: "”";
font-size: 24px;
font-weight: bold;
color: white; /* Agora as aspas são brancas */
margin-left: 5px;
}
/* Efeito de crescimento no hover */
.basic-card:hover .card-text {
transform: scale(1.1); /* Aumenta 10% ao passar o mouse */
}
/* Estilização do link */
.basic-card .card-link {
padding: 25px;
width: 100%;
}
.basic-card .card-link a {
text-decoration: none;
position: relative;
padding: 10px 0px;
font-size: 16px;
font-weight: bold;
}
/* Efeito de linha no hover */
.basic-card .card-link a:after {
top: 30px;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
width: 0;
transition: width 0.3s ease, left 0.3s ease;
}
.basic-card .card-link a:hover:after {
width: 100%;
left: 0;
}
.basic-card-roxo {
background-image: linear-gradient(to bottom right, #8261ee, #99a3d4);
}
.basic-card-roxo .card-content,
.basic-card-roxo .card-link a {
color: #fff;
}
.basic-card-roxo .card-link {
border-top: 1px solid #82c1bb;
}
.basic-card-roxo .card-link a:after {
background: #fff;
}
/* 🔴 Basic Card - Rosa */
.basic-card-rosa {
background-image: linear-gradient(to bottom right, #ff589e, #ff92c2);
}
.basic-card-rosa .card-content,
.basic-card-rosa .card-link a {
color: #fff;
}
.basic-card-rosa .card-link {
border-top: 1px solid #ff92c2;
}
.basic-card-rosa .card-link a:after {
background: #fff;
}
/* 🔵 Basic Card - Azul */
.basic-card-azul {
background-image: linear-gradient(to bottom right, #0088FF, #66aaff);
}
.basic-card-azul .card-content,
.basic-card-azul .card-link a {
color: #fff;
}
.basic-card-azul .card-link {
border-top: 1px solid #66aaff;
}
.basic-card-azul .card-link a:after {
background: #fff;
}
/* 🟢 Basic Card - Verde */
.basic-card-verde {
background-image: linear-gradient(to bottom right, #66bd5f, #99d08a);
}
.basic-card-verde .card-content,
.basic-card-verde .card-link a {
color: #fff;
}
.basic-card-verde .card-link {
border-top: 1px solid #99d08a;
}
.basic-card-verde .card-link a:after {
background: #fff;
}
.iframe-container {
width: 100%;
height: 100vh; /* Ocupa toda a altura da tela */
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: none; /* Remove a borda padrão */
}
/*****************************************************************************************************/
#news-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.news-item {
background-color: #f4f5f7;
padding: 15px;
border-radius: 6px;
transition: box-shadow 0.2s ease-in-out;
}
.news-item:hover {
box-shadow: 0 0 10px rgba(0, 87, 163, 0.2);
}
.news-item a {
font-weight: bold;
color: #0057a3;
text-decoration: none;
font-size: 1.1rem;
}
.news-item a:hover {
text-decoration: underline;
}
.news-item p {
margin-top: 8px;
font-size: 0.95rem;
color: #555;
}
/******************** Associações *****************************/
/* BEGIN CARD DESIGN */
.associacao {
display: inline-block;
position: relative;
width: 300px;
min-width: 300px;
height: 300px;
border-radius: 30px;
overflow:hidden;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
margin: 30px;
}
.associacao-profile-img {
height: 70%;
}
.associacao-description-bk {
background-image: linear-gradient(0deg , #ff589e, #ff589e);
border-radius: 30px;
position: absolute;
top: 20%;
left: -75px;
height: 85%;
width: 135%;
transform: skew(19deg, -9deg);
}
.second .associacao-description-bk {
background-image: linear-gradient(-20deg , #bb7413, #e7d25c)
}
.associacao-logo {
height: 80px;
width: 80px;
border-radius: 20px;
background-color: #fff;
position: absolute;
bottom: 70%;
left: 30px;
overflow:hidden;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
}
.associacao-logo img {
height: 100%;
}
.associacao-nome {
position: absolute;
color: #fff;
font-weight: 600;
text-align: right;
text-transform: capitalize;
right: 25px;
margin-left:25px;
bottom: 35%;
}
.associacao-sigla {
position: absolute;
color: #fff;
font-weight: 400;
text-align: right;
right: 25px;
bottom: 20%;
}
.associacao-btn {
position: absolute;
color: #fff;
right: 30px;
bottom: 10%;
padding: 10px 20px;
border: 1px solid #fff;
}
.associacao-btn a {
color: #fff;
}
.associacao-localizacao {
position: absolute;
color: #fff;
right: 25px;
bottom: 5%;
}
/* END CARD DESIGN */
.rosararas{
color: var(--rosararas);
}
.countries-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.country-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 150px;
margin-bottom: 20px;
}
.country-item img {
width: 100px;
height: 70px; /* Altura padronizada para as bandeiras */
object-fit: contain; /* Garante que a imagem se ajuste sem cortar e mantendo proporção */
margin-bottom: 5px;
}
.img-responsive-cplp {
max-width: 100%; /* Garante que a imagem não ultrapasse a largura do seu contêiner pai */
height: auto; /* Mantém a proporção original da imagem automaticamente */
display: block; /* Opcional: remove o espaço extra abaixo da imagem que pode ocorrer com inline */
}