html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
background: #ffffff;
}
/* ====================================
TOP HEADER BACKGROUND
===================================== */
.top-header {
background:
radial-gradient(
circle at 30% 0%,
rgba(255, 255, 255, 0.08),
transparent 30%
),
linear-gradient(
90deg,
#032e21 0%,
#07533a 50%,
#032e21 100%
);
}
/* ====================================
NAVBAR SHADOW
===================================== */
.premium-navbar {
transition:
box-shadow .35s ease,
border-color .35s ease,
background .35s ease;
}
.premium-navbar.scrolled {
box-shadow:
0 12px 35px
rgba(5, 53, 38, 0.12);
}
/* ====================================
NAV LINK
===================================== */
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
color: #374151;
transition: color .3s ease;
}
.nav-link::before {
content: '';
position: absolute;
left: 50%;
bottom: -11px;
width: 0;
height: 2px;
border-radius: 50px;
transform: translateX(-50%);
background:
linear-gradient(
90deg,
#C99B3B,
#084C35
);
transition: width .3s ease;
}
.nav-link:hover {
color: #084C35;
}
.nav-link:hover::before {
width: 100%;
}
/* ====================================
BULK BUTTON
===================================== */
.bulk-btn {
position: relative;
overflow: hidden;
isolation: isolate;
background:
linear-gradient(
135deg,
#E6C46C 0%,
#C99B3B 50%,
#AC7B20 100%
);
box-shadow:
0 10px 28px
rgba(201, 155, 59, 0.30);
transition:
transform .3s ease,
box-shadow .3s ease;
}
.bulk-btn:hover {
transform: translateY(-2px);
box-shadow:
0 15px 35px
rgba(201, 155, 59, 0.42);
}
/* shine animation */
.bulk-btn::before {
content: '';
position: absolute;
top: -70%;
left: -55%;
width: 32%;
height: 240%;
z-index: -1;
transform: rotate(18deg);
background:
linear-gradient(
to right,
transparent,
rgba(255, 255, 255, 0.60),
transparent
);
animation: shineEffect 3.3s infinite;
}
@keyframes shineEffect {
0% {
left: -55%;
}
42% {
left: -55%;
}
72% {
left: 130%;
}
100% {
left: 130%;
}
}
/* pulse */
.bulk-btn-pulse {
animation:
bulkPulse 2.3s infinite;
}
@keyframes bulkPulse {
0% {
box-shadow:
0 0 0 0
rgba(201, 155, 59, 0.35),
0 10px 28px
rgba(201, 155, 59, 0.30);
}
70% {
box-shadow:
0 0 0 11px
rgba(201, 155, 59, 0),
0 10px 28px
rgba(201, 155, 59, 0.30);
}
100% {
box-shadow:
0 0 0 0
rgba(201, 155, 59, 0),
0 10px 28px
rgba(201, 155, 59, 0.30);
}
}
/* ====================================
SOCIAL ICON
===================================== */
.social-icon {
transition:
transform .3s ease,
background .3s ease,
color .3s ease,
border-color .3s ease;
}
.social-icon:hover {
transform: translateY(-2px);
}
/* ====================================
HAMBURGER BUTTON
===================================== */
.hamburger-line {
width: 22px;
height: 2px;
display: block;
margin: 4px 0;
border-radius: 50px;
background: #084C35;
transition:
transform .35s ease,
opacity .3s ease;
}
#menuBtn.active .line-one {
transform:
translateY(6px)
rotate(45deg);
}
#menuBtn.active .line-two {
opacity: 0;
transform: translateX(7px);
}
#menuBtn.active .line-three {
transform:
translateY(-6px)
rotate(-45deg);
}
/* ====================================
MOBILE MENU
===================================== */
#mobileMenu {
max-height: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
overflow: hidden;
transition:
max-height .45s ease,
opacity .3s ease,
visibility .3s ease,
transform .3s ease;
}
#mobileMenu.active {
max-height: 650px;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ====================================
MOBILE LINK
===================================== */
.mobile-nav-link {
position: relative;
overflow: hidden;
}
.mobile-nav-link::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #C99B3B;
transform: scaleY(0);
transition: transform .3s ease;
}
.mobile-nav-link:hover::before {
transform: scaleY(1);
}