/* Mobile-First Base Styles */
* {
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* Prevent horizontal scroll on mobile */
.container,
.hero-container,
.nav-container {
overflow-x: hidden;
width: 100%;
}
/* Touch-friendly interactions */
button,
.btn,
a {
-webkit-tap-highlight-color: rgba(76, 175, 80, 0.2);
touch-action: manipulation;
}
/* Improve text readability on mobile */
p, li, span {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* Ensure images are responsive by default */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Focus styles for better accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
outline: 2px solid rgba(76, 175, 80, 0.8);
outline-offset: 2px;
}
/* Improve form elements on mobile */
input,
select,
textarea {
font-size: 16px; /* Prevents zoom on iOS */
border-radius: 6px;
border: 1px solid #d0d7de;
padding: 12px 15px;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select {
background-image: url("data:image/svg+xml;charset=US-ASCII,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
padding-right: 40px;
}
/* Mobile-optimized spacing */
.section-spacing {
margin: 20px 0;
}
@media (min-width: 768px) {
.section-spacing {
margin: 40px 0;
}
}
@media (min-width: 1024px) {
.section-spacing {
margin: 60px 0;
}
}
/* GLASSMORPHISM NAVBAR - Always transparent with blur effect */
nav, nav.navbar, .navbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 70px !important;
z-index: 999999 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
/* Glassmorphism Effect */
background: rgba(15, 32, 39, 0.15) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
/* Subtle border and shadow */
border-bottom: 1px solid rgba(76, 175, 80, 0.2) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
/* Smooth transitions */
transition: all 0.3s ease !important;
}
/* Remove all state-based classes - navbar is always the same */
nav.scrolling, nav.not-scrolling,
nav.navbar.scrolling, nav.navbar.not-scrolling {
background: rgba(15, 32, 39, 0.15) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(76, 175, 80, 0.2) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}
/* Navbar content visibility */
.navbar * {
visibility: visible !important;
opacity: 1 !important;
z-index: inherit !important;
}
/* Body padding to account for fixed navbar */
body {
padding-top: 70px !important;
margin: 0;
}
/* Browser Compatibility for backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
nav, nav.navbar, .navbar {
background: rgba(15, 32, 39, 0.25) !important;
}
}
/* Enhanced glassmorphism for modern browsers */
@supports (backdrop-filter: blur(20px)) {
nav, nav.navbar, .navbar {
background: rgba(15, 32, 39, 0.12) !important;
backdrop-filter: blur(25px) saturate(180%) !important;
-webkit-backdrop-filter: blur(25px) saturate(180%) !important;
}
}
/* Ensure the navbar is always on top */
.navbar {
z-index: 999999 !important;
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #24292f;
background: #ffffff;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Ensure body doesn't overlap with fixed navbar */
padding-top: 70px;
margin: 0;
}
/* GitHub-like Container */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
/* Navigation - Enhanced for Browser Compatibility */
.navbar {
background: #24292f !important;
border-bottom: 1px solid #d0d7de;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 999999 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
height: 70px !important;
min-height: 70px !important;
max-height: 70px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-brand {
display: flex;
align-items: center;
gap: 15px;
color: white;
}
.nav-logo {
width: 55px;
height: 55px;
background: linear-gradient(135deg, #ffffff 0%, #e8f5e8 30%, #d4edc4 70%, #c8e6c8 100%);
border-radius: 12px;
padding: 6px;
box-shadow: 0 4px 15px rgba(44, 85, 48, 0.5), 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
border: 1px solid rgba(76, 175, 80, 0.2);
}
.cpea-brand {
color: transparent;
background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 20%, #81c784 40%, #4caf50 60%, #66bb6a 80%, #a5d6a7 100%);
background-clip: text;
-webkit-background-clip: text;
margin: 0;
font-size: 24px;
font-weight: 900;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
text-shadow: 0 3px 6px rgba(0,0,0,0.4);
letter-spacing: 0.1em;
text-transform: uppercase;
filter: drop-shadow(0 2px 4px rgba(76, 175, 80, 0.3));
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 10px;
}
.nav-link {
color: white;
text-decoration: none;
padding: 14px 22px;
display: block;
font-size: 15px;
font-weight: 600;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(135deg, transparent 0%, rgba(76, 175, 80, 0.1) 100%);
border: 1px solid transparent;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.nav-link:hover {
background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(129, 199, 132, 0.3) 50%, rgba(165, 214, 167, 0.2) 100%);
border-color: rgba(76, 175, 80, 0.4);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
transform: translateY(-1px);
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.nav-cta {
font-weight: 700 !important;
background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(129, 199, 132, 0.2) 100%) !important;
border: 1px solid rgba(76, 175, 80, 0.3) !important;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
letter-spacing: 0.4px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.nav-cta:hover {
background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(129, 199, 132, 0.4) 50%, rgba(165, 214, 167, 0.3) 100%) !important;
border-color: rgba(76, 175, 80, 0.5) !important;
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3) !important;
transform: translateY(-2px) !important;
text-shadow: 0 3px 6px rgba(0,0,0,0.4);
}
.mobile-menu-btn {
display: none;
flex-direction: column;
justify-content: space-around;
width: 35px;
height: 30px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 10001;
}
.mobile-menu-btn span {
width: 100%;
height: 4px;
background: #f0f6fc;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(8px, -8px);
}
/* Hero Section - Enhanced with Theme-Matching Gradient */
.hero {
background: linear-gradient(135deg,
#0d1117 0%,
#161b22 20%,
#21262d 40%,
#2c5530 70%,
#238636 100%);
color: #f0f6fc;
padding: 40px 0 40px;
position: relative;
overflow: hidden;
min-height: auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0;
width: 100%;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.hero-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
position: relative;
z-index: 1;
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.hero-content {
max-width: 800px;
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 600;
line-height: 1.25;
margin-bottom: 16px;
background: linear-gradient(135deg, #f0f6fc 0%, #7c3aed 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
0% {
text-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}
100% {
text-shadow: 0 0 20px rgba(124, 58, 237, 0.5), 0 0 30px rgba(76, 175, 80, 0.3);
}
}
.hero-description {
font-size: 18px;
line-height: 1.5;
color: #8b949e;
margin-bottom: 20px;
text-align: center;
width: 100%;
max-width: 600px;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
transition: all 0.2s;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
}
.btn-primary {
background: #238636;
color: #ffffff;
border-color: rgba(240,246,252,0.1);
}
.btn-primary:hover {
background: #2ea043;
transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(35, 134, 54, 0.4);
}
.btn-secondary {
background: transparent;
color: #f0f6fc;
border-color: #30363d;
}
.btn-secondary:hover {
background: #21262d;
border-color: #8b949e;
}
.hero-image {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/* Simple Hero Visual Design */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
position: relative;
}
.hero-graphic {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cpea-emblem {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.emblem-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg,
#2c5530 0%,
#388e3c 25%,
#4caf50 50%,
#66bb6a 75%,
#81c784 100%);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
/* Enhanced shadow effects */
box-shadow:
0 0 0 3px rgba(76, 175, 80, 0.3),
0 0 0 6px rgba(129, 199, 132, 0.2),
0 0 0 9px rgba(165, 214, 167, 0.1),
0 15px 35px rgba(44, 85, 48, 0.4),
0 25px 50px rgba(76, 175, 80, 0.3),
inset 0 5px 15px rgba(255, 255, 255, 0.2),
inset 0 -5px 15px rgba(0, 0, 0, 0.2);
/* Glass morphism effect */
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
animation: emblemPulse 4s ease-in-out infinite;
}
.emblem-circle::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
rgba(76, 175, 80, 0.6),
rgba(129, 199, 132, 0.4),
rgba(165, 214, 167, 0.3),
rgba(200, 230, 201, 0.2),
rgba(76, 175, 80, 0.6)
);
z-index: -1;
animation: rotateBorder 8s linear infinite;
}
@keyframes emblemPulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 0 0 3px rgba(76, 175, 80, 0.3),
0 0 0 6px rgba(129, 199, 132, 0.2),
0 0 0 9px rgba(165, 214, 167, 0.1),
0 15px 35px rgba(44, 85, 48, 0.4),
0 25px 50px rgba(76, 175, 80, 0.3),
inset 0 5px 15px rgba(255, 255, 255, 0.2),
inset 0 -5px 15px rgba(0, 0, 0, 0.2);
}
50% {
transform: scale(1.05);
box-shadow:
0 0 0 5px rgba(76, 175, 80, 0.4),
0 0 0 10px rgba(129, 199, 132, 0.3),
0 0 0 15px rgba(165, 214, 167, 0.2),
0 20px 45px rgba(44, 85, 48, 0.5),
0 35px 70px rgba(76, 175, 80, 0.4),
inset 0 7px 20px rgba(255, 255, 255, 0.3),
inset 0 -7px 20px rgba(0, 0, 0, 0.3);
}
}
@keyframes rotateBorder {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.emblem-content i {
font-size: 60px;
color: white;
opacity: 0.9;
}
/* Enhanced 3D Logo Styling with Advanced Effects */
.logo-3d-container {
perspective: 1500px;
transform-style: preserve-3d;
animation: logoFloat 6s ease-in-out infinite;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.logo-3d-container::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
background: radial-gradient(
circle at center,
rgba(76, 175, 80, 0.2) 0%,
rgba(46, 160, 67, 0.15) 30%,
rgba(129, 199, 132, 0.1) 60%,
transparent 100%
);
border-radius: 50%;
transform: translate(-50%, -50%) translateZ(-10px);
animation: glowPulse 3s ease-in-out infinite alternate;
pointer-events: none;
}
.logo-3d {
width: 80px;
height: 80px;
transform-style: preserve-3d;
animation: logo3DRotate 12s linear infinite;
position: relative;
z-index: 2;
/* Enhanced 3D Shadow Effects */
filter:
drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))
drop-shadow(0 12px 25px rgba(44, 85, 48, 0.5))
drop-shadow(0 18px 35px rgba(76, 175, 80, 0.3))
drop-shadow(0 25px 50px rgba(129, 199, 132, 0.2))
brightness(1.3)
contrast(1.2)
saturate(1.1);
/* 3D Transform with depth */
transform:
rotateX(20deg)
rotateY(0deg)
translateZ(30px)
scale(1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 15%;
overflow: hidden;
}
/* Holographic effect */
.logo-3d::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(
45deg,
rgba(76, 175, 80, 0.4),
rgba(129, 199, 132, 0.3),
rgba(165, 214, 167, 0.2),
rgba(200, 230, 201, 0.1)
);
border-radius: 15%;
z-index: -1;
animation: holographicShimmer 4s linear infinite;
opacity: 0.7;
}
.logo-3d:hover {
transform:
rotateX(30deg)
rotateY(25deg)
translateZ(50px)
scale(1.15);
filter:
drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5))
drop-shadow(0 20px 40px rgba(44, 85, 48, 0.6))
drop-shadow(0 30px 60px rgba(76, 175, 80, 0.4))
drop-shadow(0 40px 80px rgba(129, 199, 132, 0.3))
brightness(1.5)
contrast(1.3)
saturate(1.2);
animation-play-state: paused;
}
/* Enhanced Logo Float Animation */
@keyframes logoFloat {
0%, 100% {
transform: translateY(0px) rotateY(0deg) scale(1);
}
25% {
transform: translateY(-12px) rotateY(90deg) scale(1.05);
}
50% {
transform: translateY(-18px) rotateY(180deg) scale(1.08);
}
75% {
transform: translateY(-12px) rotateY(270deg) scale(1.05);
}
}
/* Enhanced 3D Rotation Animation */
@keyframes logo3DRotate {
0% {
transform: rotateX(20deg) rotateY(0deg) translateZ(30px) scale(1);
}
20% {
transform: rotateX(25deg) rotateY(72deg) translateZ(35px) scale(1.02);
}
40% {
transform: rotateX(15deg) rotateY(144deg) translateZ(25px) scale(0.98);
}
60% {
transform: rotateX(30deg) rotateY(216deg) translateZ(40px) scale(1.03);
}
80% {
transform: rotateX(10deg) rotateY(288deg) translateZ(20px) scale(0.97);
}
100% {
transform: rotateX(20deg) rotateY(360deg) translateZ(30px) scale(1);
}
}
/* Glow Pulse Animation */
@keyframes glowPulse {
0% {
opacity: 0.3;
transform: translate(-50%, -50%) translateZ(-10px) scale(1);
}
100% {
opacity: 0.6;
transform: translate(-50%, -50%) translateZ(-10px) scale(1.2);
}
}
/* Holographic Shimmer Effect */
@keyframes holographicShimmer {
0% {
background: linear-gradient(
45deg,
rgba(76, 175, 80, 0.4),
rgba(129, 199, 132, 0.3),
rgba(165, 214, 167, 0.2),
rgba(200, 230, 201, 0.1)
);
}
25% {
background: linear-gradient(
135deg,
rgba(129, 199, 132, 0.4),
rgba(165, 214, 167, 0.3),
rgba(200, 230, 201, 0.2),
rgba(76, 175, 80, 0.1)
);
}
50% {
background: linear-gradient(
225deg,
rgba(165, 214, 167, 0.4),
rgba(200, 230, 201, 0.3),
rgba(76, 175, 80, 0.2),
rgba(129, 199, 132, 0.1)
);
}
75% {
background: linear-gradient(
315deg,
rgba(200, 230, 201, 0.4),
rgba(76, 175, 80, 0.3),
rgba(129, 199, 132, 0.2),
rgba(165, 214, 167, 0.1)
);
}
100% {
background: linear-gradient(
45deg,
rgba(76, 175, 80, 0.4),
rgba(129, 199, 132, 0.3),
rgba(165, 214, 167, 0.2),
rgba(200, 230, 201, 0.1)
);
}
}
.emblem-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ring {
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.ring-1 {
width: 200px;
height: 200px;
border: 3px solid;
border-image: linear-gradient(45deg,
rgba(76, 175, 80, 0.6),
rgba(129, 199, 132, 0.4),
rgba(165, 214, 167, 0.3),
rgba(76, 175, 80, 0.6)
) 1;
animation: ringPulseEnhanced 4s ease-in-out infinite;
filter: drop-shadow(0 0 10px rgba(76, 175, 80, 0.5));
}
.ring-2 {
width: 240px;
height: 240px;
border: 2px solid;
border-image: linear-gradient(135deg,
rgba(129, 199, 132, 0.5),
rgba(165, 214, 167, 0.4),
rgba(200, 230, 201, 0.3),
rgba(129, 199, 132, 0.5)
) 1;
animation: ringPulseEnhanced 4s ease-in-out infinite 1.3s;
filter: drop-shadow(0 0 15px rgba(129, 199, 132, 0.4));
}
.ring-3 {
width: 280px;
height: 280px;
border: 2px solid;
border-image: linear-gradient(225deg,
rgba(165, 214, 167, 0.4),
rgba(200, 230, 201, 0.3),
rgba(76, 175, 80, 0.2),
rgba(165, 214, 167, 0.4)
) 1;
animation: ringPulseEnhanced 4s ease-in-out infinite 2.6s;
filter: drop-shadow(0 0 20px rgba(165, 214, 167, 0.3));
}
@keyframes ringPulseEnhanced {
0%, 100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
filter: blur(2px) drop-shadow(0 0 5px currentColor);
}
25% {
opacity: 0.4;
transform: translate(-50%, -50%) scale(0.9);
filter: blur(1px) drop-shadow(0 0 10px currentColor);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1);
filter: blur(0px) drop-shadow(0 0 20px currentColor);
}
75% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1.1);
filter: blur(1px) drop-shadow(0 0 15px currentColor);
}
}
/* DNA HELIX - MASSIVE AND DRAMATIC */
.dna-helix {
position: absolute;
top: 10%;
right: 15%;
width: 120px;
height: 400px;
animation: dnaRotate 8s linear infinite;
transform-style: preserve-3d;
}
.dna-strand {
position: absolute;
width: 100%;
height: 100%;
}
.strand-1 {
animation: strandTwist1 4s ease-in-out infinite;
}
.strand-2 {
animation: strandTwist2 4s ease-in-out infinite reverse;
}
.dna-base {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(45deg, #2ea043, #238636, #36d058);
box-shadow:
0 0 25px rgba(46, 160, 67, 0.9),
0 0 50px rgba(35, 134, 54, 0.5),
inset 0 0 15px rgba(255, 255, 255, 0.4);
animation: basePulse 2s ease-in-out infinite;
}
.strand-1 .base-1 { top: 0%; left: 0; animation-delay: 0s; }
.strand-1 .base-2 { top: 16%; left: 20px; animation-delay: 0.3s; }
.strand-1 .base-3 { top: 32%; left: 40px; animation-delay: 0.6s; }
.strand-1 .base-4 { top: 48%; left: 20px; animation-delay: 0.9s; }
.strand-1 .base-5 { top: 64%; left: 0; animation-delay: 1.2s; }
.strand-1 .base-6 { top: 80%; left: 20px; animation-delay: 1.5s; }
.strand-2 .base-1 { top: 8%; right: 0; animation-delay: 0.15s; }
.strand-2 .base-2 { top: 24%; right: 20px; animation-delay: 0.45s; }
.strand-2 .base-3 { top: 40%; right: 40px; animation-delay: 0.75s; }
.strand-2 .base-4 { top: 56%; right: 20px; animation-delay: 1.05s; }
.strand-2 .base-5 { top: 72%; right: 0; animation-delay: 1.35s; }
.strand-2 .base-6 { top: 88%; right: 20px; animation-delay: 1.65s; }
.dna-connections {
position: absolute;
width: 100%;
height: 100%;
}
.connection {
position: absolute;
height: 3px;
background: linear-gradient(90deg,
rgba(46, 160, 67, 0.9),
rgba(35, 134, 54, 0.8),
rgba(124, 58, 237, 0.6),
rgba(35, 134, 54, 0.8),
rgba(46, 160, 67, 0.9));
border-radius: 2px;
animation: connectionGlow 1.5s ease-in-out infinite;
box-shadow: 0 0 15px rgba(46, 160, 67, 0.7);
}
.c-1 { top: 4%; left: 20px; right: 20px; animation-delay: 0s; }
.c-2 { top: 20%; left: 40px; right: 40px; animation-delay: 0.25s; }
.c-3 { top: 36%; left: 60px; right: 60px; animation-delay: 0.5s; }
.c-4 { top: 52%; left: 40px; right: 40px; animation-delay: 0.75s; }
.c-5 { top: 68%; left: 20px; right: 20px; animation-delay: 1s; }
.c-6 { top: 84%; left: 40px; right: 40px; animation-delay: 1.25s; }
/* MASSIVE FLOATING MOLECULES */
.mega-molecule {
position: absolute;
animation: megaMoleculeFloat 12s ease-in-out infinite;
}
/* Old large molecule positioning removed - pharmacy animation now contains compact medical icons */
.atom-core {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle,
#36d058 0%,
#2ea043 30%,
#238636 70%,
#1a6b2e 100%);
box-shadow:
0 0 35px rgba(54, 208, 88, 0.9),
0 0 70px rgba(46, 160, 67, 0.5),
inset 0 0 25px rgba(255, 255, 255, 0.3);
animation: coreRotate 6s linear infinite;
}
.molecule-1 .core-1 { width: 40px; height: 40px; top: 20px; left: 20px; }
.molecule-1 .core-2 { width: 50px; height: 50px; top: 100px; right: 20px; animation-delay: 2s; }
.molecule-1 .core-3 { width: 35px; height: 35px; bottom: 20px; left: 50px; animation-delay: 4s; }
.molecule-2 .core-1 { width: 35px; height: 35px; top: 15px; left: 15px; }
.molecule-2 .core-2 { width: 40px; height: 40px; bottom: 15px; right: 15px; animation-delay: 3s; }
.electron-orbit {
position: absolute;
border: 2px solid rgba(46, 160, 67, 0.3);
border-radius: 50%;
animation: orbitRotate 4s linear infinite;
}
.molecule-1 .orbit-1 {
width: 100px;
height: 100px;
top: 10px;
left: 10px;
animation-delay: 0s;
}
.molecule-1 .orbit-2 {
width: 120px;
height: 120px;
top: 30px;
right: 30px;
animation-delay: 2s;
animation-direction: reverse;
}
.molecule-2 .orbit-1 {
width: 80px;
height: 80px;
top: 20px;
left: 20px;
}
.electron {
position: absolute;
width: 8px;
height: 8px;
background: radial-gradient(circle, #36d058, #2ea043);
border-radius: 50%;
box-shadow: 0 0 15px rgba(54, 208, 88, 0.8);
animation: electronSpin 2s linear infinite;
}
.orbit-1 .e-1 { top: -4px; left: calc(50% - 4px); }
.orbit-1 .e-2 { bottom: -4px; right: calc(50% - 4px); animation-delay: 1s; }
.orbit-2 .e-3 { left: -4px; top: calc(50% - 4px); }
.molecular-bond {
position: absolute;
height: 4px;
background: linear-gradient(90deg,
transparent,
rgba(46, 160, 67, 0.8),
rgba(124, 58, 237, 0.6),
rgba(46, 160, 67, 0.8),
transparent);
border-radius: 2px;
animation: bondPulse 3s ease-in-out infinite;
box-shadow: 0 0 15px rgba(46, 160, 67, 0.5);
}
.molecule-1 .bond-1 {
top: 40px;
left: 60px;
right: 70px;
transform: rotate(30deg);
}
.molecule-1 .bond-2 {
top: 120px;
left: 70px;
right: 60px;
transform: rotate(-45deg);
animation-delay: 1.5s;
}
.molecule-2 .bond-1 {
top: 55px;
left: 50px;
right: 55px;
transform: rotate(60deg);
}
/* DRAMATIC PARTICLE EXPLOSION */
.particle-explosion {
position: absolute;
top: 40%;
right: 60%;
width: 100px;
height: 100px;
}
.explosion-particle {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(54, 208, 88, 1) 0%,
rgba(46, 160, 67, 0.9) 30%,
rgba(35, 134, 54, 0.8) 60%,
rgba(124, 58, 237, 0.6) 80%,
transparent 100%);
animation: particleExplode 4s ease-out infinite;
box-shadow:
0 0 25px rgba(54, 208, 88, 0.8),
0 0 50px rgba(46, 160, 67, 0.4);
}
.p-1 { animation-delay: 0s; }
.p-2 { animation-delay: 0.2s; }
.p-3 { animation-delay: 0.4s; }
.p-4 { animation-delay: 0.6s; }
.p-5 { animation-delay: 0.8s; }
.p-6 { animation-delay: 1s; }
.p-7 { animation-delay: 1.2s; }
.p-8 { animation-delay: 1.4s; }
.p-9 { animation-delay: 1.6s; }
.p-10 { animation-delay: 1.8s; }
.p-11 { animation-delay: 2s; }
.p-12 { animation-delay: 2.2s; }
/* GIANT PHARMA PILLS */
.giant-pill {
position: absolute;
width: 80px;
height: 140px;
border-radius: 40px;
overflow: hidden;
animation: pillFloat 8s ease-in-out infinite;
box-shadow:
0 10px 30px rgba(46, 160, 67, 0.4),
0 0 50px rgba(46, 160, 67, 0.2);
}
/* Old pill positioning removed - now handled in pharmacy-animation section */
.pill-half {
position: absolute;
width: 100%;
height: 50%;
}
.half-1 {
top: 0;
background: linear-gradient(135deg,
#36d058 0%,
#2ea043 50%,
#238636 100%);
}
.half-2 {
bottom: 0;
background: linear-gradient(135deg,
#238636 0%,
#2ea043 50%,
#1a6b2e 100%);
}
.pill-shine {
position: absolute;
top: 10%;
left: 20%;
width: 60%;
height: 80%;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.3),
transparent 50%);
border-radius: 30px;
animation: pillShine 3s ease-in-out infinite;
}
/* ENERGETIC WAVE RINGS */
/* Old energy waves positioning removed - now using compact pharmacy animation */
.wave-ring {
position: absolute;
border: 3px solid rgba(46, 160, 67, 0.8);
border-radius: 50%;
animation: waveExpand 3s ease-out infinite;
box-shadow:
0 0 20px rgba(46, 160, 67, 0.6),
inset 0 0 10px rgba(54, 208, 88, 0.3);
}
.ring-1 {
width: 40px;
height: 40px;
top: 80px;
left: 80px;
animation-delay: 0s;
}
.ring-2 {
width: 60px;
height: 60px;
top: 70px;
left: 70px;
animation-delay: 0.6s;
}
.ring-3 {
width: 80px;
height: 80px;
top: 60px;
left: 60px;
animation-delay: 1.2s;
}
.ring-4 {
width: 100px;
height: 100px;
top: 50px;
left: 50px;
animation-delay: 1.8s;
}
.ring-5 {
width: 120px;
height: 120px;
top: 40px;
left: 40px;
animation-delay: 2.4s;
}
/* CHEMICAL REACTION BURSTS */
.chemical-burst {
position: absolute;
width: 100px;
height: 100px;
animation: burstRotate 6s linear infinite;
}
/* Old burst positioning removed - now handled in pharmacy-animation section */
.burst-center {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
background: radial-gradient(circle,
rgba(54, 208, 88, 1),
rgba(46, 160, 67, 0.9),
rgba(35, 134, 54, 0.7),
rgba(124, 58, 237, 0.5),
transparent);
border-radius: 50%;
box-shadow:
0 0 40px rgba(46, 160, 67, 0.9),
0 0 80px rgba(54, 208, 88, 0.4);
animation: burstPulse 2s ease-in-out infinite;
}
.burst-ray {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 40px;
background: linear-gradient(180deg,
rgba(54, 208, 88, 1) 0%,
rgba(46, 160, 67, 0.8) 50%,
rgba(35, 134, 54, 0.6) 80%,
transparent 100%);
transform-origin: center bottom;
animation: rayFlash 1.5s ease-in-out infinite;
box-shadow: 0 0 15px rgba(54, 208, 88, 0.6);
}
.ray-1 { transform: translate(-50%, -100%) rotate(0deg); animation-delay: 0s; }
.ray-2 { transform: translate(-50%, -100%) rotate(60deg); animation-delay: 0.25s; }
.ray-3 { transform: translate(-50%, -100%) rotate(120deg); animation-delay: 0.5s; }
.ray-4 { transform: translate(-50%, -100%) rotate(180deg); animation-delay: 0.75s; }
.ray-5 { transform: translate(-50%, -100%) rotate(240deg); animation-delay: 1s; }
.ray-6 { transform: translate(-50%, -100%) rotate(300deg); animation-delay: 1.25s; }
/* FLOATING MEDICAL SYMBOLS */
.medical-symbol {
position: absolute;
animation: symbolFloat 10s ease-in-out infinite;
color: rgba(54, 208, 88, 0.9);
font-weight: bold;
text-shadow:
0 0 25px rgba(54, 208, 88, 0.8),
0 0 50px rgba(46, 160, 67, 0.4);
}
/* Old medical symbol positioning removed - now handled in pharmacy-animation section */
.cross-horizontal {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(90deg,
transparent,
rgba(54, 208, 88, 0.9) 20%,
rgba(46, 160, 67, 1) 50%,
rgba(54, 208, 88, 0.9) 80%,
transparent);
transform: translateY(-50%);
box-shadow: 0 0 15px rgba(54, 208, 88, 0.6);
}
.cross-vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 8px;
background: linear-gradient(180deg,
transparent,
rgba(54, 208, 88, 0.9) 20%,
rgba(46, 160, 67, 1) 50%,
rgba(54, 208, 88, 0.9) 80%,
transparent);
transform: translateX(-50%);
box-shadow: 0 0 15px rgba(54, 208, 88, 0.6);
}
/* Old symbol-2 positioning removed - now handled in pharmacy-animation section */
/* PULSATING BACKGROUND GRID */
.grid-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
}
.grid-line {
position: absolute;
background: linear-gradient(90deg,
transparent,
rgba(54, 208, 88, 0.5) 20%,
rgba(46, 160, 67, 0.6) 50%,
rgba(54, 208, 88, 0.5) 80%,
transparent);
animation: gridPulse 4s ease-in-out infinite;
box-shadow: 0 0 10px rgba(54, 208, 88, 0.3);
}
.line-h-1 {
top: 20%;
left: 0;
right: 0;
height: 2px;
animation-delay: 0s;
}
.line-h-2 {
top: 50%;
left: 0;
right: 0;
height: 2px;
animation-delay: 1.5s;
}
.line-h-3 {
top: 80%;
left: 0;
right: 0;
height: 2px;
animation-delay: 3s;
}
.line-v-1 {
left: 25%;
top: 0;
bottom: 0;
width: 2px;
animation-delay: 0.5s;
background: linear-gradient(180deg,
transparent,
rgba(46, 160, 67, 0.4),
transparent);
}
.line-v-2 {
left: 50%;
top: 0;
bottom: 0;
width: 2px;
animation-delay: 2s;
background: linear-gradient(180deg,
transparent,
rgba(46, 160, 67, 0.4),
transparent);
}
.line-v-3 {
left: 75%;
top: 0;
bottom: 0;
width: 2px;
animation-delay: 3.5s;
background: linear-gradient(180deg,
transparent,
rgba(46, 160, 67, 0.4),
transparent);
}
/* Advanced Animation Keyframes */
/* Old molecule structure positioning removed - now using compact pharmacy animation */
.molecule-node {
position: absolute;
width: 12px;
height: 12px;
background: #2ea043;
border-radius: 50%;
box-shadow: 0 0 10px rgba(46, 160, 67, 0.6);
animation: nodePulse 2s ease-in-out infinite;
}
.node-1 { top: 0; left: 0; }
.node-2 { top: 0; right: 0; animation-delay: 0.5s; }
.node-3 { bottom: 0; left: 0; animation-delay: 1s; }
.node-4 { bottom: 0; right: 0; animation-delay: 1.5s; }
.molecule-bond {
position: absolute;
height: 2px;
background: linear-gradient(90deg, transparent, #2ea043, transparent);
animation: bondGlow 3s ease-in-out infinite;
}
.bond-1 {
top: 6px;
left: 12px;
right: 12px;
}
.bond-2 {
bottom: 6px;
left: 12px;
right: 12px;
animation-delay: 1s;
}
/* Particle Trails */
.particle-trail {
position: absolute;
width: 3px;
height: 100px;
background: linear-gradient(180deg, rgba(46, 160, 67, 0.8), transparent);
border-radius: 2px;
animation: trailMove 4s ease-in-out infinite;
}
.trail-1 {
top: 10%;
right: 30%;
animation-delay: 0s;
}
.trail-2 {
top: 40%;
right: 45%;
animation-delay: 1s;
}
.trail-3 {
top: 70%;
right: 20%;
animation-delay: 2s;
}
.trail-4 {
top: 55%;
right: 55%;
animation-delay: 3s;
}
/* Pharmaceutical Icons */
.pharma-icon {
position: absolute;
animation: iconFloat 7s ease-in-out infinite;
}
.icon-pill {
width: 24px;
height: 40px;
background: linear-gradient(135deg, #2ea043, #238636);
border-radius: 12px 12px 8px 8px;
position: relative;
box-shadow: 0 4px 15px rgba(35, 134, 54, 0.3);
}
.icon-pill:after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: rgba(255, 255, 255, 0.3);
}
.icon-flask {
width: 20px;
height: 30px;
background: linear-gradient(135deg, #238636, #2ea043);
border-radius: 0 0 15px 15px;
position: relative;
box-shadow: 0 4px 15px rgba(35, 134, 54, 0.3);
}
.icon-flask:before {
content: '';
position: absolute;
top: -8px;
left: 7px;
width: 6px;
height: 8px;
background: #238636;
border-radius: 3px 3px 0 0;
}
.icon-dna {
width: 30px;
height: 30px;
border: 3px solid #2ea043;
border-radius: 50%;
position: relative;
box-shadow: 0 4px 15px rgba(35, 134, 54, 0.3);
}
.icon-dna:before,
.icon-dna:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #2ea043;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.icon-dna:before { left: 2px; }
.icon-dna:after { right: 2px; }
.icon-1 {
top: 35%;
right: 38%;
animation-delay: 0s;
}
.icon-2 {
top: 15%;
right: 55%;
animation-delay: 2s;
}
.icon-3 {
top: 70%;
right: 30%;
animation-delay: 4s;
}
/* SPECTACULAR ANIMATION KEYFRAMES */
/* DNA Helix Animations */
@keyframes dnaRotate {
0% { transform: rotateY(0deg) rotateX(0deg); }
25% { transform: rotateY(90deg) rotateX(15deg); }
50% { transform: rotateY(180deg) rotateX(0deg); }
75% { transform: rotateY(270deg) rotateX(-15deg); }
100% { transform: rotateY(360deg) rotateX(0deg); }
}
@keyframes strandTwist1 {
0%, 100% { transform: rotateZ(0deg) translateX(0px); }
50% { transform: rotateZ(180deg) translateX(20px); }
}
@keyframes strandTwist2 {
0%, 100% { transform: rotateZ(0deg) translateX(0px); }
50% { transform: rotateZ(-180deg) translateX(-20px); }
}
@keyframes basePulse {
0%, 100% {
transform: scale(1) rotateY(0deg);
box-shadow: 0 0 20px rgba(46, 160, 67, 0.8), 0 0 40px rgba(46, 160, 67, 0.4);
}
50% {
transform: scale(1.3) rotateY(180deg);
box-shadow: 0 0 30px rgba(46, 160, 67, 1), 0 0 60px rgba(46, 160, 67, 0.6);
}
}
@keyframes connectionGlow {
0%, 100% {
opacity: 0.6;
transform: scaleX(1);
box-shadow: 0 0 10px rgba(46, 160, 67, 0.6);
}
50% {
opacity: 1;
transform: scaleX(1.2);
box-shadow: 0 0 20px rgba(46, 160, 67, 1);
}
}
/* Mega Molecule Animations */
@keyframes megaMoleculeFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg) scale(1);
filter: hue-rotate(0deg);
}
25% {
transform: translate(30px, -40px) rotate(90deg) scale(1.1);
filter: hue-rotate(90deg);
}
50% {
transform: translate(-20px, -80px) rotate(180deg) scale(1.2);
filter: hue-rotate(180deg);
}
75% {
transform: translate(40px, -60px) rotate(270deg) scale(1.1);
filter: hue-rotate(270deg);
}
}
@keyframes coreRotate {
0% {
transform: rotate(0deg) scale(1);
box-shadow: 0 0 30px rgba(46, 160, 67, 0.8), 0 0 60px rgba(46, 160, 67, 0.4);
}
50% {
transform: rotate(180deg) scale(1.2);
box-shadow: 0 0 40px rgba(46, 160, 67, 1), 0 0 80px rgba(46, 160, 67, 0.6);
}
100% {
transform: rotate(360deg) scale(1);
box-shadow: 0 0 30px rgba(46, 160, 67, 0.8), 0 0 60px rgba(46, 160, 67, 0.4);
}
}
@keyframes orbitRotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes electronSpin {
0% {
transform: rotate(0deg) translateX(40px) rotate(0deg) scale(1);
box-shadow: 0 0 15px rgba(54, 208, 88, 0.8);
}
50% {
transform: rotate(180deg) translateX(40px) rotate(-180deg) scale(1.5);
box-shadow: 0 0 25px rgba(54, 208, 88, 1);
}
100% {
transform: rotate(360deg) translateX(40px) rotate(-360deg) scale(1);
box-shadow: 0 0 15px rgba(54, 208, 88, 0.8);
}
}
@keyframes bondPulse {
0%, 100% {
opacity: 0.6;
transform: scaleY(1);
box-shadow: 0 0 15px rgba(46, 160, 67, 0.5);
}
50% {
opacity: 1;
transform: scaleY(1.5);
box-shadow: 0 0 25px rgba(46, 160, 67, 0.8);
}
}
/* Particle Explosion Animation */
@keyframes particleExplode {
0% {
transform: translate(0, 0) scale(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
transform: translate(0, 0) scale(1) rotate(45deg);
}
80% {
opacity: 1;
}
100% {
transform: translate(var(--random-x, 80px), var(--random-y, -120px)) scale(0) rotate(720deg);
opacity: 0;
}
}
.p-1 { --random-x: 60px; --random-y: -80px; }
.p-2 { --random-x: -45px; --random-y: -100px; }
.p-3 { --random-x: 90px; --random-y: -60px; }
.p-4 { --random-x: -70px; --random-y: -90px; }
.p-5 { --random-x: 30px; --random-y: -110px; }
.p-6 { --random-x: -85px; --random-y: -70px; }
.p-7 { --random-x: 110px; --random-y: -85px; }
.p-8 { --random-x: -40px; --random-y: -105px; }
.p-9 { --random-x: 75px; --random-y: -95px; }
.p-10 { --random-x: -90px; --random-y: -75px; }
.p-11 { --random-x: 50px; --random-y: -115px; }
.p-12 { --random-x: -60px; --random-y: -85px; }
/* Giant Pill Animations */
@keyframes pillFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg) scale(1);
box-shadow: 0 10px 30px rgba(46, 160, 67, 0.4), 0 0 50px rgba(46, 160, 67, 0.2);
}
33% {
transform: translate(20px, -30px) rotate(15deg) scale(1.05);
box-shadow: 0 15px 40px rgba(46, 160, 67, 0.6), 0 0 60px rgba(46, 160, 67, 0.3);
}
66% {
transform: translate(-15px, -50px) rotate(-10deg) scale(1.1);
box-shadow: 0 20px 50px rgba(46, 160, 67, 0.8), 0 0 70px rgba(46, 160, 67, 0.4);
}
}
@keyframes pillShine {
0%, 100% {
opacity: 0.3;
transform: translateX(0px) scaleX(1);
}
50% {
opacity: 0.8;
transform: translateX(10px) scaleX(1.2);
}
}
/* Energy Wave Animations */
@keyframes waveExpand {
0% {
transform: scale(0);
opacity: 1;
border-width: 4px;
}
50% {
opacity: 0.8;
border-width: 2px;
}
100% {
transform: scale(3);
opacity: 0;
border-width: 1px;
}
}
/* Chemical Burst Animations */
@keyframes burstRotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes burstPulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 0 30px rgba(46, 160, 67, 0.8);
}
50% {
transform: translate(-50%, -50%) scale(1.5);
box-shadow: 0 0 50px rgba(46, 160, 67, 1);
}
}
@keyframes rayFlash {
0%, 100% {
opacity: 0.4;
transform: translate(-50%, -100%) scaleY(1);
}
50% {
opacity: 1;
transform: translate(-50%, -100%) scaleY(1.5);
}
}
/* Medical Symbol Animations */
@keyframes symbolFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg) scale(1);
text-shadow: 0 0 20px rgba(46, 160, 67, 0.6);
}
33% {
transform: translate(15px, -25px) rotate(5deg) scale(1.1);
text-shadow: 0 0 30px rgba(46, 160, 67, 0.8);
}
66% {
transform: translate(-10px, -40px) rotate(-3deg) scale(1.05);
text-shadow: 0 0 25px rgba(46, 160, 67, 0.7);
}
}
/* Grid Pulse Animation */
@keyframes gridPulse {
0%, 100% {
opacity: 0.2;
transform: scaleX(1);
}
50% {
opacity: 0.6;
transform: scaleX(1.02);
}
}
/* Section Styles - GitHub Design */
section {
padding: 80px 0;
}
.section-header {
text-align: center;
margin-bottom: 64px;
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
.section-header h2 {
font-size: 32px;
font-weight: 600;
color: #24292f;
margin-bottom: 16px;
line-height: 1.25;
}
.section-header p {
font-size: 16px;
color: #656d76;
line-height: 1.5;
}
/* About Section - Enhanced Pharmaceutical Gradient Design */
.about {
background: linear-gradient(135deg,
#f0f4f8 0%,
#e8f2ea 15%,
#dff7e2 30%,
#c8e6c8 45%,
#b8dab8 60%,
#a8ceac 75%,
#97c2a0 90%,
#86b694 100%);
border-top: 2px solid rgba(76, 175, 80, 0.3);
border-bottom: 2px solid rgba(76, 175, 80, 0.3);
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -1px 0 rgba(76, 175, 80, 0.2),
0 4px 20px rgba(44, 85, 48, 0.1);
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 25% 25%, rgba(76, 175, 80, 0.08) 0%, transparent 50%),
radial-gradient(circle at 75% 30%, rgba(129, 199, 132, 0.06) 0%, transparent 50%),
linear-gradient(45deg, transparent 0%, rgba(76, 175, 80, 0.03) 50%, transparent 100%),
url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.about-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 64px;
align-items: start;
}
.about-text h3 {
font-size: 24px;
font-weight: 600;
color: #24292f;
margin-bottom: 16px;
}
.about-text p {
font-size: 16px;
color: #656d76;
line-height: 1.6;
margin-bottom: 24px;
}
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.feature {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
}
.feature i {
color: #238636;
font-size: 16px;
}
.feature span {
color: #24292f;
font-size: 14px;
font-weight: 500;
}
.about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.stat {
text-align: center;
padding: 24px;
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 12px;
transition: all 0.2s;
}
.stat:hover {
border-color: #238636;
box-shadow: 0 3px 12px rgba(35, 134, 54, 0.1);
transform: translateY(-2px);
}
.stat h3 {
font-size: 32px;
font-weight: 600;
color: #238636;
margin-bottom: 8px;
line-height: 1;
}
.stat p {
color: #656d76;
font-size: 14px;
font-weight: 500;
margin: 0;
}
/* Benefits Section - Enhanced Pharmaceutical Gradient Design */
.benefits {
background: linear-gradient(135deg,
#ffffff 0%,
#f8fdf9 10%,
#f0f8f0 25%,
#e8f5e8 40%,
#e0f2e0 55%,
#d8efd8 70%,
#f0f8f0 85%,
#ffffff 100%);
position: relative;
border-top: 1px solid rgba(76, 175, 80, 0.2);
border-bottom: 1px solid rgba(76, 175, 80, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 2px 15px rgba(44, 85, 48, 0.08);
}
.benefits::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 15% 25%, rgba(76, 175, 80, 0.06) 0%, transparent 40%),
radial-gradient(circle at 85% 30%, rgba(129, 199, 132, 0.05) 0%, transparent 40%),
radial-gradient(circle at 50% 80%, rgba(165, 214, 167, 0.04) 0%, transparent 40%),
radial-gradient(circle at 25% 75%, rgba(76, 175, 80, 0.03) 0%, transparent 35%),
linear-gradient(45deg, transparent 0%, rgba(76, 175, 80, 0.02) 25%, transparent 50%, rgba(129, 199, 132, 0.02) 75%, transparent 100%),
url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 24px;
}
.benefit-card {
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 50%, #f6f8fa 100%);
border: 1px solid rgba(76, 175, 80, 0.15);
border-radius: 16px;
padding: 28px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.08),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
#4caf50 0%,
#66bb6a 25%,
#81c784 50%,
#a5d6a7 75%,
#c8e6c8 100%);
transform: scaleX(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 16px 16px 0 0;
}
.benefit-card:hover::before {
transform: scaleX(1);
}
.benefit-card:hover {
border-color: rgba(76, 175, 80, 0.4);
box-shadow: 0 12px 32px rgba(76, 175, 80, 0.15),
0 4px 16px rgba(44, 85, 48, 0.1),
inset 0 1px 0 rgba(255,255,255,0.9);
transform: translateY(-6px);
background: linear-gradient(135deg, #ffffff 0%, #f8fdf9 50%, #f0f8f0 100%);
}
.benefit-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 50%, #dff2df 100%);
border: 2px solid rgba(76, 175, 80, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.benefit-card:hover .benefit-icon {
background: linear-gradient(135deg, #dff7e2 0%, #c8e6c8 50%, #b8dab8 100%);
border-color: rgba(76, 175, 80, 0.5);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2),
inset 0 1px 0 rgba(255,255,255,0.9);
transform: scale(1.05);
}
.benefit-icon i {
font-size: 20px;
color: #238636;
}
.benefit-card h3 {
font-size: 16px;
font-weight: 600;
color: #24292f;
margin-bottom: 8px;
line-height: 1.25;
}
.benefit-card p {
color: #656d76;
line-height: 1.5;
font-size: 14px;
margin: 0;
}
/* News Section - Enhanced with Gradient */
.news {
background: linear-gradient(135deg, #f6f8fa 0%, #dafbe1 30%, #f6f8fa 70%, #e1e7ed 100%);
border-top: 1px solid #d0d7de;
border-bottom: 1px solid #d0d7de;
position: relative;
}
.news::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 25%, rgba(35,134,54,0.02) 25%, rgba(35,134,54,0.02) 50%, transparent 50%, transparent 75%, rgba(35,134,54,0.02) 75%);
background-size: 40px 40px;
pointer-events: none;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 24px;
}
.news-card {
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 12px;
padding: 24px;
transition: all 0.2s;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 16px;
}
.news-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #238636, #2ea043);
transform: scaleX(0);
transition: transform 0.2s;
}
.news-card:hover::before {
transform: scaleX(1);
}
.news-card:hover {
border-color: #238636;
box-shadow: 0 8px 24px rgba(35, 134, 54, 0.12);
transform: translateY(-4px);
}
.news-icon {
width: 48px;
height: 48px;
background: #f6f8fa;
border: 1px solid #d0d7de;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: all 0.2s;
}
.news-card:hover .news-icon {
background: #dafbe1;
border-color: #238636;
}
.news-icon i {
font-size: 20px;
color: #238636;
}
.news-card h3 {
font-size: 18px;
font-weight: 600;
color: #24292f;
margin-bottom: 8px;
line-height: 1.25;
}
.news-card p {
color: #656d76;
line-height: 1.5;
font-size: 14px;
margin-bottom: 16px;
}
.news-meta {
display: flex;
align-items: center;
gap: 16px;
font-size: 12px;
color: #8b949e;
margin-top: auto;
}
.news-date {
display: flex;
align-items: center;
gap: 4px;
}
.news-category {
background: #dafbe1;
color: #137239;
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
}
/* Events Section - Enhanced with Gradient */
.events {
background: linear-gradient(135deg, #ffffff 0%, #f6f8fa 25%, #dafbe1 50%, #f6f8fa 75%, #ffffff 100%);
position: relative;
}
.events::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.events-section {
margin-bottom: 64px;
}
.events-section h3 {
font-size: 24px;
font-weight: 600;
color: #24292f;
margin-bottom: 32px;
text-align: center;
}
.upcoming-events {
display: grid;
gap: 24px;
}
.event-card {
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 12px;
padding: 24px;
display: flex;
gap: 24px;
align-items: center;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.event-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #238636, #2ea043);
transform: scaleX(0);
transition: transform 0.2s;
}
.event-card:hover::before {
transform: scaleX(1);
}
.event-card:hover {
border-color: #238636;
box-shadow: 0 8px 24px rgba(35, 134, 54, 0.12);
transform: translateY(-2px);
}
.event-date {
text-align: center;
min-width: 80px;
background: #f6f8fa;
border: 1px solid #d0d7de;
color: #24292f;
padding: 16px;
border-radius: 12px;
transition: all 0.2s;
}
.event-card:hover .event-date {
background: #dafbe1;
border-color: #238636;
}
.event-date .day {
display: block;
font-size: 24px;
font-weight: 600;
line-height: 1;
color: #238636;
}
.event-date .month {
display: block;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
color: #656d76;
margin-top: 4px;
}
.event-date .year {
display: block;
font-size: 11px;
color: #8b949e;
margin-top: 2px;
}
.event-details {
flex: 1;
}
.event-details h4 {
color: #24292f;
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.event-details p {
color: #656d76;
margin-bottom: 6px;
font-size: 14px;
line-height: 1.5;
}
.event-details p i {
color: #238636;
margin-right: 8px;
width: 16px;
}
.event-register {
margin-top: 16px;
padding: 8px 16px;
font-size: 12px;
background: #238636;
color: #ffffff;
border: none;
border-radius: 6px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
transition: all 0.2s;
}
.event-register:hover {
background: #2ea043;
transform: translateY(-1px);
}
/* Event Gallery - GitHub Style */
.event-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.gallery-item {
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 12px;
overflow: hidden;
transition: all 0.2s;
}
.gallery-item:hover {
border-color: #238636;
box-shadow: 0 8px 24px rgba(35, 134, 54, 0.12);
transform: translateY(-2px);
}
.gallery-placeholder {
height: 200px;
background: linear-gradient(135deg, #f6f8fa 0%, #e1e7ed 100%);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #d0d7de;
}
.gallery-placeholder i {
font-size: 32px;
color: #656d76;
}
.gallery-info {
padding: 16px;
text-align: center;
}
.gallery-info h5 {
color: #24292f;
margin-bottom: 4px;
font-size: 14px;
font-weight: 600;
}
.gallery-info p {
color: #656d76;
font-size: 12px;
margin: 0;
}
/* Projects Section - Enhanced with Gradient */
.projects {
background: linear-gradient(135deg, #f6f8fa 0%, #e1e7ed 25%, #dafbe1 50%, #e1e7ed 75%, #f6f8fa 100%);
border-top: 1px solid #d0d7de;
border-bottom: 1px solid #d0d7de;
position: relative;
}
.projects::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 30%, rgba(35,134,54,0.05) 0%, transparent 40%),
radial-gradient(circle at 70% 70%, rgba(35,134,54,0.03) 0%, transparent 40%);
pointer-events: none;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 24px;
}
.project-card {
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 12px;
padding: 24px;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.project-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #238636, #2ea043);
transform: scaleX(0);
transition: transform 0.2s;
}
.project-card:hover::before {
transform: scaleX(1);
}
.project-card:hover {
border-color: #238636;
box-shadow: 0 8px 24px rgba(35, 134, 54, 0.12);
transform: translateY(-4px);
}
.project-icon {
width: 48px;
height: 48px;
background: #f6f8fa;
border: 1px solid #d0d7de;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: all 0.2s;
}
.project-card:hover .project-icon {
background: #dafbe1;
border-color: #238636;
}
.project-icon i {
font-size: 20px;
color: #238636;
}
.project-card h3 {
color: #24292f;
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.project-card p {
color: #656d76;
line-height: 1.5;
margin-bottom: 16px;
font-size: 14px;
}
.project-status {
position: absolute;
top: 16px;
right: 16px;
}
.status {
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status.active {
background: #dafbe1;
color: #137239;
}
.status.planning {
background: #fff8c5;
color: #7d4e00;
}
/* Members Section - Enhanced with Gradient */
.members {
background: linear-gradient(135deg, #ffffff 0%, #f6f8fa 30%, #ffffff 70%, #dafbe1 100%);
position: relative;
}
.members::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(35,134,54,0.02) 50%, transparent 100%);
pointer-events: none;
}
.member-search {
margin-bottom: 64px;
text-align: center;
}
.search-container {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
#memberSearch {
padding: 12px 16px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-size: 14px;
min-width: 300px;
transition: all 0.2s;
background: #ffffff;
color: #24292f;
}
#memberSearch:focus {
outline: none;
border-color: #238636;
box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.1);
}
.search-result {
max-width: 500px;
margin: 0 auto;
padding: 24px;
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(35, 134, 54, 0.1);
display: none;
}
.members-slider {
overflow: hidden;
position: relative;
background: #f6f8fa;
border: 1px solid #d0d7de;
border-radius: 12px;
padding: 24px;
}
/* Member Companies Logo Carousel Section */
.member-companies {
background: linear-gradient(135deg, #f8f9ff 0%, #e8f5e8 30%, #f0f8ff 70%, #e6f7ff 100%);
position: relative;
overflow: hidden;
padding: 80px 0;
}
.member-companies::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(44, 85, 48, 0.05) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
linear-gradient(90deg, transparent 0%, rgba(44, 85, 48, 0.02) 50%, transparent 100%);
pointer-events: none;
}
.logo-carousel-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
border-radius: 16px;
box-shadow:
0 8px 32px rgba(44, 85, 48, 0.1),
0 4px 16px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
backdrop-filter: blur(10px);
}
.logo-carousel {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.logo-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 40px;
opacity: 0;
transform: translateX(100%);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-slide.active {
opacity: 1;
transform: translateX(0);
}
.logo-slide.prev {
transform: translateX(-100%);
}
.company-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid rgba(44, 85, 48, 0.1);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.company-logo::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(44, 85, 48, 0.1), transparent);
transition: left 0.6s;
}
.company-logo:hover::before {
left: 100%;
}
.company-logo:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 12px 40px rgba(44, 85, 48, 0.15),
0 6px 20px rgba(0, 0, 0, 0.08);
border-color: rgba(44, 85, 48, 0.2);
}
.company-logo img {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 12px;
transition: transform 0.3s ease;
filter: grayscale(0.3);
}
.company-logo:hover img {
transform: scale(1.1);
filter: grayscale(0);
}
.company-info h4 {
font-size: 14px;
font-weight: 600;
color: #2c5530;
margin: 0 0 4px 0;
line-height: 1.3;
}
.company-info p {
font-size: 11px;
color: #666;
margin: 0;
line-height: 1.4;
opacity: 0.8;
}
.carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 20px;
background: linear-gradient(135deg, rgba(44, 85, 48, 0.05) 0%, rgba(248, 250, 252, 0.8) 100%);
border-top: 1px solid rgba(44, 85, 48, 0.1);
}
.carousel-btn {
width: 40px;
height: 40px;
border: 1px solid rgba(44, 85, 48, 0.2);
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #2c5530;
font-size: 14px;
}
.carousel-btn:hover {
background: linear-gradient(135deg, #2c5530 0%, #238636 100%);
color: white;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(44, 85, 48, 0.3);
}
.carousel-indicators {
display: flex;
gap: 10px;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(44, 85, 48, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active,
.indicator:hover {
background: #2c5530;
transform: scale(1.2);
}
.carousel-info {
text-align: center;
padding: 16px 20px;
background: rgba(44, 85, 48, 0.05);
border-top: 1px solid rgba(44, 85, 48, 0.1);
}
.carousel-info p {
margin: 0;
font-size: 12px;
color: #666;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.carousel-info i {
color: #2c5530;
}
/* Auto-sliding animation */
.logo-carousel.auto-sliding .logo-slide.active {
animation: slideInOut 5s ease-in-out;
}
@keyframes slideInOut {
0% { opacity: 0; transform: translateX(100%); }
10% { opacity: 1; transform: translateX(0); }
90% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(-100%); }
}
/* Responsive Design for Member Companies */
@media (max-width: 1024px) {
.logo-slide {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 30px;
}
.company-logo img {
width: 70px;
height: 70px;
}
}
@media (max-width: 768px) {
.member-companies {
padding: 60px 0;
}
.logo-slide {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 24px;
height: 280px;
}
.company-logo {
padding: 16px;
}
.company-logo img {
width: 60px;
height: 60px;
}
.company-info h4 {
font-size: 13px;
}
.company-info p {
font-size: 10px;
}
.carousel-btn {
width: 36px;
height: 36px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.logo-slide {
grid-template-columns: 1fr;
height: 320px;
padding: 20px;
}
.company-logo {
padding: 20px;
flex-direction: row;
text-align: left;
gap: 12px;
}
.company-logo img {
width: 50px;
height: 50px;
margin-bottom: 0;
flex-shrink: 0;
}
.company-info {
flex: 1;
}
.carousel-controls {
padding: 16px;
gap: 16px;
}
.carousel-info p {
font-size: 11px;
}
}
/* Membership Section - Enhanced with Gradient */
.membership {
background: linear-gradient(135deg, #f6f8fa 0%, #e1e7ed 50%, #dbeafe 100%);
border-top: 1px solid #d0d7de;
border-bottom: 1px solid #d0d7de;
position: relative;
overflow: hidden;
}
.membership::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.membership-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 64px;
align-items: start;
}
.membership-benefits h3 {
color: #24292f;
margin-bottom: 24px;
font-size: 20px;
font-weight: 600;
}
.membership-benefits ul {
list-style: none;
margin: 0;
padding: 0;
}
.membership-benefits li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
color: #656d76;
font-size: 14px;
line-height: 1.5;
}
.membership-benefits li i {
color: #238636;
font-size: 16px;
width: 16px;
flex-shrink: 0;
}
.membership-form {
background: #ffffff;
padding: 32px;
border: 1px solid #d0d7de;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(35, 134, 54, 0.08);
}
.membership-form h3 {
color: #24292f;
margin-bottom: 24px;
font-size: 20px;
font-weight: 600;
text-align: center;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
margin-bottom: 6px;
color: #24292f;
font-weight: 500;
font-size: 14px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-size: 14px;
transition: all 0.2s;
background: #ffffff;
color: #24292f;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #238636;
box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 8px;
}
.checkbox-group input {
width: auto;
margin: 0;
}
.checkbox-group label {
margin: 0;
font-size: 14px;
color: #656d76;
}
.form-note {
text-align: center;
color: #656d76;
font-size: 12px;
margin-top: 16px;
line-height: 1.5;
}
/* Footer - GitHub Style */
.footer {
background: #24292f;
color: #f0f6fc;
padding: 64px 0 24px;
border-top: 1px solid #30363d;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 48px;
margin-bottom: 48px;
}
.footer-section h3,
.footer-section h4 {
margin-bottom: 16px;
color: #f0f6fc;
font-size: 16px;
font-weight: 600;
}
.footer-section p {
color: #8b949e;
line-height: 1.5;
margin-bottom: 8px;
font-size: 14px;
}
.footer-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-section ul li {
margin-bottom: 8px;
}
.footer-section ul li a {
color: #8b949e;
text-decoration: none;
transition: color 0.2s;
font-size: 14px;
}
.footer-section ul li a:hover {
color: #f0f6fc;
}
.social-links {
display: flex;
gap: 12px;
margin-top: 16px;
}
.social-links a {
width: 32px;
height: 32px;
background: #30363d;
border: 1px solid #30363d;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #8b949e;
text-decoration: none;
transition: all 0.2s;
}
.social-links a:hover {
background: #238636;
border-color: #238636;
color: #ffffff;
}
.footer-bottom {
text-align: center;
padding-top: 24px;
border-top: 1px solid #30363d;
color: #8b949e;
font-size: 12px;
}
/* Footer logo styles */
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.footer-logo-img {
width: 150px;
height: 150px;
object-fit: contain;
}
.footer-logo h3 {
margin: 0;
color: white;
}
.footer-logo:hover .footer-logo-img {
transform: scale(1.05);
/* filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); */
}
.footer-logo h3 {
margin: 0;
color: #f0f6fc;
font-size: 16px;
font-weight: 600;
}
/* Contact Section - Enhanced Pharmaceutical Gradient Design */
.contact {
background: linear-gradient(135deg,
#f8fdf9 0%,
#f0f8f0 10%,
#e8f5e8 25%,
#dff2df 40%,
#d7efd7 55%,
#ceebce 70%,
#c6e8c6 85%,
#bde5bd 100%);
position: relative;
overflow: hidden;
border-top: 2px solid rgba(76, 175, 80, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 4px 20px rgba(44, 85, 48, 0.1);
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(76, 175, 80, 0.08) 0%, transparent 30%),
radial-gradient(circle at 80% 30%, rgba(129, 199, 132, 0.06) 0%, transparent 35%),
radial-gradient(circle at 40% 70%, rgba(165, 214, 167, 0.05) 0%, transparent 40%),
radial-gradient(circle at 70% 80%, rgba(76, 175, 80, 0.04) 0%, transparent 25%),
linear-gradient(45deg, transparent 0%, rgba(76, 175, 80, 0.02) 25%, transparent 50%, rgba(129, 199, 132, 0.02) 75%, transparent 100%),
url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px;
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 50%, #f6f8fa 100%);
border-radius: 16px;
border: 1px solid rgba(76, 175, 80, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 2px 12px rgba(76, 175, 80, 0.08),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.contact-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg,
#4caf50 0%,
#66bb6a 25%,
#81c784 50%,
#a5d6a7 75%,
#c8e6c8 100%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-item:hover {
background: linear-gradient(135deg, #ffffff 0%, #f8fdf9 50%, #f0f8f0 100%);
border-color: rgba(76, 175, 80, 0.3);
box-shadow: 0 8px 32px rgba(76, 175, 80, 0.15),
0 4px 16px rgba(44, 85, 48, 0.1),
inset 0 1px 0 rgba(255,255,255,0.9);
transform: translateY(-4px);
}
.contact-item:hover::before {
width: 6px;
background: linear-gradient(180deg,
#4caf50 0%,
#66bb6a 20%,
#81c784 40%,
#a5d6a7 60%,
#c8e6c8 80%,
#e8f5e8 100%);
}
.contact-item i {
color: #4caf50;
font-size: 24px;
margin-top: 4px;
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 50%, #dff2df 100%);
border-radius: 8px;
border: 1px solid rgba(76, 175, 80, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
}
.contact-item:hover i {
color: #2e7d32;
background: linear-gradient(135deg, #e8f5e8 0%, #dff2df 50%, #d7efd7 100%);
border-color: rgba(76, 175, 80, 0.4);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
transform: scale(1.1);
}
.contact-item div h4 {
color: #24292f;
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.contact-item div p {
color: #656d76;
font-size: 14px;
margin: 0;
line-height: 1.5;
}
/* Contact Form Styles */
.contact-form {
background: #f6f8fa;
padding: 32px;
border: 1px solid #d0d7de;
border-radius: 12px;
}
/* ======================================
CPEA BRANDING STYLES - Enhanced Typography
======================================== */
/* Enhanced CPEA Text Styling - Global Ultra Attractive */
.cpea-brand,
.cpea-text {
font-family: 'Inter', 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif !important;
font-weight: 900 !important;
font-style: normal !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
position: relative !important;
display: inline-block !important;
/* Ultra-modern gradient text */
background: linear-gradient(135deg,
#2c5530 0%,
#4caf50 15%,
#66bb6a 25%,
#81c784 35%,
#a5d6a7 45%,
#c8e6c8 55%,
#e8f5e8 65%,
#66bb6a 75%,
#4caf50 85%,
#2c5530 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
background-size: 300% 300% !important;
/* Premium shadow effects */
filter: drop-shadow(0 4px 8px rgba(44, 85, 48, 0.4))
drop-shadow(0 2px 4px rgba(76, 175, 80, 0.3))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
/* Animation for gradient movement */
animation: gradientShift 4s ease-in-out infinite alternate !important;
}
/* Gradient animation */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}
50% {
background-position: 100% 50%;
transform: perspective(1000px) rotateX(2deg) rotateY(1deg);
}
100% {
background-position: 0% 50%;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}
}
/* Enhanced glow effect on hover */
.cpea-brand:hover,
.cpea-text:hover {
transform: translateY(-2px) scale(1.02) !important;
filter: drop-shadow(0 6px 12px rgba(44, 85, 48, 0.5))
drop-shadow(0 4px 8px rgba(76, 175, 80, 0.4))
drop-shadow(0 2px 4px rgba(129, 199, 132, 0.3))
drop-shadow(0 8px 16px rgba(44, 85, 48, 0.2)) !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
animation-duration: 2s !important;
}
/* Special 3D effect pseudo-element */
.cpea-brand::before,
.cpea-text::before {
content: attr(data-text) !important;
position: absolute !important;
top: 2px !important;
left: 2px !important;
z-index: -1 !important;
background: linear-gradient(135deg,
font-size: 18px !important;
letter-spacing: 0.1em !important;
}
}
/* Ultra-premium glow animation */
@keyframes premiumGlow {
0%, 100% {
filter: drop-shadow(0 4px 8px rgba(44, 85, 48, 0.4))
drop-shadow(0 2px 4px rgba(76, 175, 80, 0.3));
}
50% {
filter: drop-shadow(0 6px 12px rgba(44, 85, 48, 0.6))
drop-shadow(0 4px 8px rgba(76, 175, 80, 0.4))
drop-shadow(0 0 20px rgba(129, 199, 132, 0.3));
}
}
/* Apply glow animation to focused elements */
.cpea-brand:focus,
.cpea-text:focus {
animation: premiumGlow 2s ease-in-out infinite !important;
}
/* PHARMACY ANIMATION - FLOATING MEDICAL ICONS */
.pharmacy-animation {
position: relative;
width: 300px;
height: 120px;
margin: 20px auto 30px auto;
pointer-events: none;
z-index: 2;
}
.floating-element {
position: absolute;
font-size: 20px;
color: rgba(46, 160, 67, 0.8);
animation: medicalFloat 6s ease-in-out infinite;
transition: all 0.3s ease;
text-shadow:
0 0 15px rgba(46, 160, 67, 0.6),
0 0 30px rgba(76, 175, 80, 0.3);
}
.floating-element:hover {
color: rgba(76, 175, 80, 1);
transform: scale(1.2);
text-shadow:
0 0 20px rgba(76, 175, 80, 0.8),
0 0 40px rgba(129, 199, 132, 0.4);
}
/* Individual icon positioning in a compact cluster */
.pill-1 {
top: 10px;
left: 50px;
animation-delay: 0s;
}
.molecule-1 {
top: 0px;
left: 130px;
animation-delay: 1s;
}
.syringe-1 {
top: 20px;
left: 200px;
animation-delay: 2s;
}
.pill-2 {
top: 60px;
left: 40px;
animation-delay: 3s;
font-size: 18px;
}
.molecule-2 {
top: 70px;
left: 120px;
animation-delay: 4s;
font-size: 22px;
}
.stethoscope-1 {
top: 55px;
left: 200px;
animation-delay: 5s;
}
.dna-1 {
top: 35px;
left: 250px;
animation-delay: 2.5s;
font-size: 18px;
}
/* Medical floating animation */
@keyframes medicalFloat {
0%, 100% {
transform: translateY(0px) translateX(0px) rotate(0deg);
opacity: 0.7;
}
25% {
transform: translateY(-8px) translateX(3px) rotate(5deg);
opacity: 1;
}
50% {
transform: translateY(-12px) translateX(-2px) rotate(-3deg);
opacity: 0.9;
}
75% {
transform: translateY(-5px) translateX(4px) rotate(2deg);
opacity: 0.8;
}
}
/* Responsive adjustments for pharmacy animation */
@media (max-width: 768px) {
.pharmacy-animation {
width: 250px;
height: 100px;
margin: 15px auto 25px auto;
}
.floating-element {
font-size: 16px;
}
.pill-1 { top: 8px; left: 40px; }
.molecule-1 { top: 0px; left: 100px; }
.syringe-1 { top: 15px; left: 160px; }
.pill-2 { top: 50px; left: 30px; }
.molecule-2 { top: 60px; left: 95px; }
.stethoscope-1 { top: 45px; left: 160px; }
.dna-1 { top: 25px; left: 200px; }
}
@media (max-width: 480px) {
.pharmacy-animation {
width: 200px;
height: 80px;
margin: 10px auto 20px auto;
}
.floating-element {
font-size: 14px;
}
.pill-1 { top: 5px; left: 30px; }
.molecule-1 { top: 0px; left: 80px; }
.syringe-1 { top: 10px; left: 130px; }
.pill-2 { top: 40px; left: 25px; }
.molecule-2 { top: 50px; left: 75px; }
.stethoscope-1 { top: 35px; left: 125px; }
.dna-1 { top: 20px; left: 160px; }
}
/* ======================================
COMPREHENSIVE MOBILE RESPONSIVENESS
====================================== */
/* Mobile Navigation Improvements */
@media (max-width: 768px) {
.navbar {
padding: 8px 0;
height: 60px;
}
.nav-container {
padding: 0 15px;
}
.nav-brand {
gap: 8px;
}
.nav-logo {
width: 32px;
height: 32px;
}
.cpea-brand {
font-size: 18px;
}
.mobile-menu-btn {
width: 30px;
height: 25px;
}
.mobile-menu-btn span {
height: 3px;
}
}
/* Hero Section Mobile Responsiveness */
@media (max-width: 768px) {
.hero {
padding: 30px 0;
min-height: auto;
}
.hero-container {
padding: 0 15px;
gap: 15px;
}
.hero-visual {
height: 200px;
}
.emblem-circle {
width: 120px;
height: 120px;
}
.logo-3d {
width: 60px;
height: 60px;
}
.hero-title {
font-size: clamp(24px, 6vw, 32px);
margin-bottom: 12px;
line-height: 1.2;
}
.hero-description {
font-size: 16px;
margin-bottom: 16px;
padding: 0 10px;
}
.hero-buttons {
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 300px;
}
.btn {
width: 100%;
justify-content: center;
padding: 14px 20px;
font-size: 16px;
}
}
/* Small Mobile Phones */
@media (max-width: 480px) {
.hero {
padding: 20px 0;
}
.hero-container {
padding: 0 10px;
gap: 12px;
}
.hero-visual {
height: 160px;
}
.emblem-circle {
width: 100px;
height: 100px;
}
.logo-3d {
width: 50px;
height: 50px;
}
.hero-title {
font-size: clamp(20px, 7vw, 28px);
margin-bottom: 10px;
}
.hero-description {
font-size: 14px;
margin-bottom: 14px;
line-height: 1.4;
}
.btn {
font-size: 15px;
padding: 12px 18px;
}
}
/* About Section Mobile */
@media (max-width: 768px) {
.about {
padding: 60px 0;
}
.about-content {
flex-direction: column;
gap: 30px;
}
.about-features {
grid-template-columns: 1fr;
gap: 12px;
}
.about-stats {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.stat h3 {
font-size: 28px;
}
.stat p {
font-size: 14px;
}
}
@media (max-width: 480px) {
.about {
padding: 40px 0;
}
.about-stats {
grid-template-columns: 1fr;
gap: 15px;
}
.stat {
text-align: center;
padding: 20px;
}
}
/* Benefits Section Mobile */
@media (max-width: 768px) {
.benefits {
padding: 60px 0;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.benefit-card {
padding: 25px 20px;
}
.benefit-icon {
width: 60px;
height: 60px;
}
.benefit-icon i {
font-size: 24px;
}
.benefit-card h3 {
font-size: 18px;
margin: 15px 0 10px;
}
.benefit-card p {
font-size: 14px;
line-height: 1.5;
}
}
@media (max-width: 480px) {
.benefits {
padding: 40px 0;
}
.benefit-card {
padding: 20px 15px;
}
.benefit-icon {
width: 50px;
height: 50px;
}
.benefit-icon i {
font-size: 20px;
}
}
/* News Section Mobile */
@media (max-width: 768px) {
.news {
padding: 60px 0;
}
.news-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.news-card {
padding: 25px 20px;
}
.news-icon {
width: 50px;
height: 50px;
}
.news-icon i {
font-size: 20px;
}
.news-card h3 {
font-size: 18px;
margin: 15px 0 10px;
}
.news-card p {
font-size: 14px;
line-height: 1.5;
margin-bottom: 15px;
}
.news-meta {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.news-date {
font-size: 12px;
}
.news-category {
font-size: 11px;
padding: 4px 8px;
}
}
/* Events Section Mobile */
@media (max-width: 768px) {
.events {
padding: 60px 0;
}
.upcoming-events {
gap: 20px;
}
.event-card {
flex-direction: column;
padding: 20px;
gap: 15px;
}
.event-date {
width: 100%;
max-width: 120px;
height: 80px;
margin: 0 auto;
}
.event-date .day {
font-size: 24px;
}
.event-date .month {
font-size: 12px;
}
.event-date .year {
font-size: 11px;
}
.event-details {
text-align: center;
}
.event-details h4 {
font-size: 18px;
margin-bottom: 10px;
}
.event-details p {
font-size: 14px;
margin-bottom: 8px;
}
.event-register {
margin-top: 15px;
width: 100%;
max-width: 200px;
}
.event-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.gallery-item {
padding: 15px;
}
.gallery-placeholder {
width: 100%;
height: 80px;
}
.gallery-info h5 {
font-size: 14px;
margin: 8px 0 4px;
}
.gallery-info p {
font-size: 12px;
}
}
@media (max-width: 480px) {
.events {
padding: 40px 0;
}
.event-gallery {
grid-template-columns: 1fr;
gap: 12px;
}
.gallery-item {
padding: 12px;
}
}
/* Projects Section Mobile */
@media (max-width: 768px) {
.projects {
padding: 60px 0;
}
.projects-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.project-card {
padding: 25px 20px;
}
.project-icon {
width: 60px;
height: 60px;
}
.project-icon i {
font-size: 24px;
}
.project-card h3 {
font-size: 18px;
margin: 15px 0 10px;
}
.project-card p {
font-size: 14px;
line-height: 1.5;
margin-bottom: 15px;
}
}
/* Members Section Mobile */
@media (max-width: 768px) {
.members {
padding: 60px 0;
}
.member-search {
padding: 0 15px;
}
.search-container {
flex-direction: column;
gap: 12px;
}
.search-container input {
width: 100%;
padding: 12px 15px;
font-size: 16px;
}
.search-container button {
width: 100%;
padding: 12px 20px;
font-size: 16px;
}
}
/* Membership Form Mobile */
@media (max-width: 768px) {
.membership {
padding: 60px 0;
}
.membership-content {
flex-direction: column;
gap: 30px;
}
.membership-benefits {
order: 2;
}
.membership-form {
order: 1;
width: 100%;
}
.form-row {
flex-direction: column;
gap: 16px;
}
.form-group {
width: 100%;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px 15px;
font-size: 16px;
}
.membership-form button {
width: 100%;
padding: 14px 20px;
font-size: 16px;
}
}
/* Contact Section Mobile */
@media (max-width: 768px) {
.contact {
padding: 60px 0;
}
.contact-content {
flex-direction: column;
gap: 30px;
}
.contact-info {
gap: 20px;
}
.contact-item {
flex-direction: row;
align-items: flex-start;
gap: 15px;
}
.contact-item i {
font-size: 20px;
margin-top: 2px;
flex-shrink: 0;
}
.contact-item h4 {
font-size: 16px;
margin-bottom: 4px;
}
.contact-item p {
font-size: 14px;
}
.contact-form {
width: 100%;
}
.contact-form input,
.contact-form textarea {
padding: 12px 15px;
font-size: 16px;
}
.contact-form button {
width: 100%;
padding: 14px 20px;
font-size: 16px;
}
}
/* Footer Mobile */
@media (max-width: 768px) {
.footer {
padding: 40px 0 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.footer-section {
padding: 0 15px;
}
.footer-logo {
justify-content: center;
}
.social-links {
justify-content: center;
}
.footer-section ul {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.footer-bottom {
padding: 20px 15px;
text-align: center;
}
}
/* Floating WhatsApp Button Mobile */
@media (max-width: 768px) {
.fab {
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
}
.fab i {
font-size: 1.3rem;
}
}
/* General Mobile Improvements */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.section-header {
margin-bottom: 30px;
text-align: center;
}
.section-header h2 {
font-size: clamp(24px, 5vw, 32px);
margin-bottom: 8px;
}
.section-header p {
font-size: 14px;
line-height: 1.5;
}
}
/* Ultra Small Devices */
@media (max-width: 360px) {
.container {
padding: 0 10px;
}
.hero-container {
padding: 0 8px;
}
.hero-title {
font-size: clamp(18px, 8vw, 24px);
}
.hero-description {
font-size: 13px;
}
.btn {
font-size: 14px;
padding: 10px 16px;
}
}
/* Mobile Navigation Menu Styles */
@media (max-width: 768px) {
.mobile-menu-btn {
display: flex;
}
.nav-menu {
position: fixed;
top: 60px;
left: -100%;
width: 100%;
height: calc(100vh - 60px);
background: linear-gradient(135deg,
#0f2027 0%,
#203a43 20%,
#2c5530 40%,
#1e3a2b 60%,
#24292f 80%,
#0d1117 100%);
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 40px 20px 20px;
gap: 0;
transition: left 0.3s ease;
overflow-y: auto;
z-index: 10000;
backdrop-filter: blur(10px);
border-top: 2px solid rgba(76, 175, 80, 0.3);
box-shadow: 0 4px 25px rgba(44, 85, 48, 0.4);
}
.nav-menu.mobile-open {
left: 0;
}
.nav-menu li {
width: 100%;
margin: 0;
}
.nav-menu li a {
display: block;
width: 100%;
padding: 18px 24px;
text-align: center;
border-bottom: 1px solid rgba(76, 175, 80, 0.2);
background: linear-gradient(135deg, transparent 0%, rgba(76, 175, 80, 0.05) 100%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.4px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
color: #f0f6fc;
text-decoration: none;
}
.nav-menu li a:hover,
.nav-menu li a:focus {
background: linear-gradient(135deg,
rgba(76, 175, 80, 0.15) 0%,
rgba(129, 199, 132, 0.2) 50%,
rgba(165, 214, 167, 0.15) 100%);
box-shadow: 0 2px 10px rgba(76, 175, 80, 0.2);
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
transform: translateX(5px);
}
.nav-cta {
background: linear-gradient(135deg, #238636 0%, #2ea043 100%) !important;
border: 1px solid rgba(46, 160, 67, 0.3) !important;
border-radius: 6px !important;
margin-top: 10px !important;
}
.nav-cta:hover {
background: linear-gradient(135deg, #2ea043 0%, #36d058 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 15px rgba(46, 160, 67, 0.4) !important;
}
}