.creative-card {
position: relative;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 30px rgba(81, 100, 61, 0.1);
}
.creative-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #70ac4d, #a8b5a2, rgb(71, 92, 49));
transform: scaleX(0);
transition: transform 0.4s ease;
}
.creative-card:hover {
transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
box-shadow: 0 20px 40px rgba(81, 100, 61, 0.2);
}
.creative-card:hover::before {
transform: scaleX(1);
}
.icon-bg {
background: linear-gradient(135deg, #7dc7aa, #336d56);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
box-shadow: 0 8px 20px rgba(81, 100, 61, 0.3);
transition: transform 0.3s ease;
}
.creative-card:hover .icon-bg {
transform: scale(1.1) rotate(360deg);
}
.section-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,56.5c0,0,298.666,0,399,0S1062,0,1200,0V120H0Z' opacity='.25' fill='%237dc7aa'/%3E%3Cpath d='M0,56.5c0,0,298.666,0,399,0S1062,0,1200,0V56.5h-1200Z' opacity='.1' fill='%237dc7aa'/%3E%3C/svg%3E");
    background-size: cover;
}
.header-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #7dc7aa, #2c7055);
}
.navbar-gradient {
background: linear-gradient(135deg, #7dc7aa 0%, #31785c 100%);
}
.btn-creative {
background: linear-gradient(135deg, #7dc7aa, #468e71);
color: white;
padding: 12px 24px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(81, 100, 61, 0.3);
}
.btn-creative:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(81, 100, 61, 0.4);
}
/* Parallax effect for header image */
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mainFont {
font-family: 'Ruwudu', serif;
}
.mainColor {
color: #2c7055;
}
.mainBG {
background-color: #8fc9ad;
}
.objectives-card:hover {
    span{
        color: #2c7055;
    }
}