fountainsofgrowth / style.css
amoslain's picture
CAN YOU MAKE IT more proffesional?
d778f83 verified
:root {
--primary: #6d28d9;
--primary-light: #8b5cf6;
--primary-dark: #4c1d95;
--secondary: #10b981;
--secondary-light: #34d399;
--secondary-dark: #059669;
--accent: #ec4899;
--accent-light: #f472b6;
--accent-dark: #db2777;
--light: #f8fafc;
--dark: #1e293b;
--gray: #64748b;
--gray-light: #e2e8f0;
}
body {
font-family: 'Rubik', sans-serif;
line-height: 1.6;
color: var(--dark);
background-color: var(--light);
direction: rtl;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.3;
color: var(--primary-dark);
}
a {
color: var(--primary);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--primary-light);
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 0.375rem;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
}
.btn-primary {
background-color: var(--primary);
color: white;
}
.btn-primary:hover {
background-color: var(--primary-light);
transform: translateY(-2px);
}
.btn-secondary {
background-color: var(--secondary);
color: white;
}
.btn-secondary:hover {
background-color: var(--secondary-light);
transform: translateY(-2px);
}
.section {
padding: 5rem 0;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 3rem;
text-align: center;
position: relative;
}
.section-title:after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--primary);
margin: 1rem auto 0;
}
.card {
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
padding: 1.5rem;
}
.text-center {
text-align: center;
}
.mb-0 {
margin-bottom: 0;
}
.py-3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.bg-light {
background-color: var(--light);
}
.bg-primary {
background-color: var(--primary);
color: white;
}
.text-primary {
color: var(--primary);
}
.text-secondary {
color: var(--secondary);
}
.text-accent {
color: var(--accent);
}
.font-bold {
font-weight: 700;
}
.rounded-lg {
border-radius: 0.5rem;
}
.shadow-md {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.transition {
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.section {
padding: 3rem 0;
}
.section-title {
font-size: 2rem;
}
}