:root {
--primary-color: #2c8c4a; --secondary-color: #1a5c30; --light-color: #f8f9fa;
--dark-color: #343a40;
--text-color: #333;
--border-color: #dee2e6;
}
body {
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
color: var(--text-color);
overflow-x: hidden;
} .btn {
border-radius: 0 !important;
box-shadow: none !important;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif !important;
font-style: normal !important;
}
.btn-success {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-success:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.text-success {
color: var(--primary-color) !important;
} .header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent;
transition: background-color 0.3s ease;
padding: 20px 0;
}
.header.scrolled {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.header .navbar-brand img {
transition: filter 0.3s ease;
} .ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
user-select: none;
}
.hamRotate.active {
transform: rotate(45deg);
}
.line {
fill: none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke: white;
stroke-width: 5.5;
stroke-linecap: round;
}
.header.scrolled .line {
stroke: var(--text-color);
}
.ham4 .top {
stroke-dasharray: 40 121;
}
.ham4 .bottom {
stroke-dasharray: 40 121;
}
.ham4.active .top {
stroke-dashoffset: -68px;
}
.ham4.active .bottom {
stroke-dashoffset: -68px;
} .hero {
position: relative;
height: 100vh;
overflow: hidden;
}
.carousel-item {
position: relative;
height: 100vh;
}
.carousel-item video,
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
#carouselFade .carousel-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.35);
z-index: 1;
}
.carousel-caption {
top: 50%;
transform: translateY(-50%);
bottom: auto;
}
.fade-text {
animation: fadeInOut 5s ease-in-out forwards;
}
@keyframes fadeInOut {
0% {
opacity: 0;
transform: translateY(30px);
}
20% {
opacity: 1;
transform: translateY(0);
}
80% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-30px);
}
} section h2 {
font-size: 2.5rem;
margin-bottom: 30px;
position: relative;
padding-bottom: 15px;
}
section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: rgba( 91, 48, 0, 0.7);
}
.text-center h2::after {
left: 50%;
transform: translateX(-50%);
} .feature i {
color: var(--primary-color);
} .parallax {
position: relative;
background-image: url(//nexo-parqueventas.com/wp-content/themes/ricardo-ortiz/assets/img/parallax-bg.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.parallax .container {
position: relative;
z-index: 1;
} img {
max-width: 100%;
} footer {
background-color: var(--dark-color);
}
footer h5 {
position: relative;
padding-bottom: 15px;
}
footer h5::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--primary-color);
} @media (max-width: 992px) {
.navbar-collapse {
background-color: white;
padding: 1rem;
}
}
@media (max-width: 768px) {
.carousel-caption h1 {
font-size: 2rem;
}
section h2 {
font-size: 2rem;
}
} .content-absolute h2 { opacity: 0; }
.content-absolute h2 .word {
display: inline-block;
}
.content-absolute h2 .char {
opacity: 0;
display: inline-block;
transform-origin: 50% 80%;
}
.content-absolute h2 .char.in {
animation: fadeChar 0.6s ease forwards;
animation-delay: var(--d, 0s);
}
@keyframes fadeChar {
from { opacity: 0; transform: translate(var(--x, 0), var(--y, 10px)) rotate(0deg); }
to { opacity: 1; transform: translate(0, 0) rotate(var(--r, 0deg)); }
} .content-absolute h3,
.content-absolute h4,
.content-absolute .sub {
opacity: 0;
display: inline-block;
overflow: hidden;
clip-path: inset(100% 0 0 0);
transform: translateY(6px);
will-change: clip-path, transform, opacity;
}
.content-absolute .baseline-in {
animation: baselineClip 0.6s ease-out forwards;
}
@keyframes baselineClip {
from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(6px); }
to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}  #resolution-debug {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 6px 10px;
font-size: 12px;
line-height: 1;
border-radius: 6px;
z-index: 9999;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hamRotate.active {
transform: rotate(45deg);
}
.hamRotate180.active {
transform: rotate(180deg);
}
.line {
fill:none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke:#000;
stroke-width:5.5;
stroke-linecap:round;
}
.ham4 .top {
stroke-dasharray: 40 121;
}
.ham4 .bottom {
stroke-dasharray: 40 121;
}
.ham4.active .top {
stroke-dashoffset: -68px;
}
.ham4.active .bottom {
stroke-dashoffset: -68px;
}