.vc-hero {
position: relative;
height: 100vh;
} .vc-hero .hero-controls {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: flex-end;
gap: 10px;
z-index: 9999;
}
@media screen and (max-width: 768px) {
.vc-hero .hero-controls { justify-content: center !important; }
}
.vc-hero .hero-toggle {
padding: 10px 25px;
border: 1px solid #ffffff;
border-radius: 999px;
background: transparent;
color: #ffffff;
font-size: 16px;
font-weight: normal;
cursor: pointer;
transition: all 0.3s ease;
}
.vc-hero .hero-toggle:hover,
.vc-hero .hero-toggle.active {
background: var(--azul-cta);
border-color: var(--azul-cta);
color: #ffffff;
}
.vc-hero .hero-toggle.active { font-weight: bold; } .vc-hero .hero-slider .slide-item {
position: relative;
height: 100vh;
background: center center / cover no-repeat;
}
.vc-hero .hero-slider .slide-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.7) 0%,
rgba(0,0,0,0.4) 40%,
rgba(0,0,0,0) 100%
);
pointer-events: none;
z-index: 1;
}
.slide-item .container { max-width: 70%; }
.vc-hero .hero-slider .slide-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 650px;
z-index: 2;
color: #fff;
}
.vc-hero .slide-content h2 {
font-size: clamp(1.2rem, 5vw, 3.6rem);
font-weight: normal;
}
.vc-hero .slide-content h3 {
font-size: clamp(1rem, 3vw, 2rem);
font-weight: 100;
} @media (max-width: 1366px) {
.vc-hero .slide-content h2 {
font-size: clamp(1rem, 4vw, 2.5rem);
}
.vc-hero .slide-content h3 {
font-size: clamp(0.9rem, 2.5vw, 1.4rem);
}
.vc-hero a.hero-btn span {
font-size: 18px !important;
line-height: 20px !important;
}
.vc-hero a.hero-btn i {
font-size: 24px !important;
}
.vc-hero a.hero-btn span i {
font-size: 12px !important;
}
.vc-hero .hero-buttons { }
} @media (max-width: 768px) {
.vc-hero .slide-content h2 {
font-size: clamp(0.9rem, 5vw, 2.4rem);
}
.vc-hero .slide-content h3 {
font-size: clamp(0.8rem, 4vw, 1.4rem);
}
}
.vc-hero .slide-content h1 strong,
.vc-hero .slide-content h2 strong { font-weight: 900; } .vc-hero .slide-content .btn {
padding: 10px 25px;
border: 1px solid #ffffff;
border-radius: 999px;
background: transparent;
color: #ffffff;
font-size: 16px;
font-weight: normal;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
margin-top: 10px;
} .slick-next:before, .slick-prev:before {
display: none;
}
.vc-hero .slick-prev,
.vc-hero .slick-next {
width: 44px;
height: 44px;
border-radius: 50%;
background: none;
border: none;
color: transparent;
font-size: 0; z-index: 10;
}
.vc-hero .slick-prev { left: 10%; }
.vc-hero .slick-next { right: 10%; }
.vc-hero .slick-arrow i {
width: 45px;
height: 45px;
font-size: 45px;
line-height: 45px;
color: #FFF !important;
}
.vc-hero ul.slick-dots { bottom: 5px !important; }
.vc-hero .slick-dots li button:before {
color: #fff !important;
opacity: 0.5;
font-size: 14px;
}
.vc-hero .slick-dots li.slick-active button:before { opacity: 1; } .vc-hero .hero-buttons { position: relative; top: -220px; }
.vc-hero .hero-buttons .buttons-set {
display: flex;
gap: 20px;
}
.vc-hero .hero-buttons-set {
display: none;
flex-direction: row;
justify-content: center;
gap: 20px;
}
.vc-hero .hero-buttons-set.is-active { display: flex; } .page-id-147 .vc-hero .hero-buttons-set { display: flex; } .vc-hero a.hero-btn {
position: relative;
width: 215px;
padding: 20px;
background: rgba(213,223,226,0.8);
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
text-align: center;
color: #27495C;
text-decoration: none;
align-items: center;
gap: 10px;
}
.vc-hero a.hero-btn::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 12px;
background: #133c55;
border-radius: 2px;
}
.vc-hero a.hero-btn i { font-size: 32px; }
.vc-hero a.hero-btn span { 
font-size: 22px;
height: 100%;
line-height: 28px;
margin-bottom: 12px;
}
.page-id-147 a.hero-btn span { 
display: flex !important;
align-items: center !important;
}
.vc-hero a.hero-btn span i { font-size: 14px; } .vc-hero .is-hidden {
opacity: 0;
pointer-events: none;
position: absolute;
left: -9999px;
} @media screen and (max-width: 540px) {
.vc-hero,
.vc-hero .hero-slider .slide-item { height: 100vh; }
.vc-hero .hero-slider .slide-content {
top: 50%;
transform: translateY(-25%);
width: 100% !important;
max-width: 100% !important;
left: 0;
padding: 0 20px;
text-align: center;
}
.vc-hero .hero-buttons .buttons-set {
display: flex;
flex-wrap: wrap; gap: 15px; justify-content: center; }
.vc-hero .hero-buttons-set {
flex-direction: column;
gap: 10px;
}
.vc-hero a.hero-btn {
width: 45% !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
padding: 5px !important;
}
.vc-hero a.hero-btn::after { height: 0 !important; }
.vc-hero a.hero-btn span {
font-size: 16px !important;
line-height: 16px;
margin: 0 !important;
padding: 7px !important;
}
.vc-hero a.hero-btn i { display: none; }
.vc-hero a.hero-btn i.fa-arrow-up-right-from-square {
font-size: 10px !important;
margin-left: 3px !important;
}
.vc-hero .hero-buttons {
position: absolute;
top: 75vh;
}
} @media screen and (min-width: 540px) and (max-width: 860px) {
.vc-hero .hero-buttons .buttons-set {
display: flex;
flex-wrap: wrap; gap: 15px; justify-content: center; }
.vc-hero .hero-buttons .buttons-set a.hero-btn {
flex: 1 1 45%; max-width: 250px; padding: 12px; }
.vc-hero .hero-buttons .buttons-set a.hero-btn span {
font-size: 18px;
}
}