:root { --primary-color: #20C997; --secondary-color: #FD7E14; --dark-color: #212529; --light-color: #F8F9FA; } body { font-family: 'Poppins', sans-serif; color: var(--dark-color); } .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited { background: var(--primary-color) !important; border-color: var(--primary-color) !important; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2); } .card { border: none; border-radius: 0.5rem; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } .card-img-container { position: relative; } .card-img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); padding: 1.5rem; } .card-img-overlay .card-title a { color: white; text-decoration: none; } .card-img-overlay .badge { position: absolute; top: 1rem; right: 1rem; } .navbar-brand { letter-spacing: -0.5px; } .logo-img { vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } .hero-section { background: linear-gradient(45deg, var(--primary-color), #5be3c2); }