/* — Core Definitions & Animations — */
:root {
–path-gold: #CBA35C;
–path-leather: #8B5A2B;
–path-forest: #2C4C3B;
–path-cream: #F5F1E8;
–path-dark: #1A2F25;
–glass-border: rgba(255, 255, 255, 0.2);
}
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes heavySlideUp {
0% {
opacity: 0;
transform: translateY(50px) scale(0.95);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes compassPulse {
0% { box-shadow: 0 0 0 0 rgba(203, 163, 92, 0.4); }
70% { box-shadow: 0 0 0 20px rgba(203, 163, 92, 0); }
100% { box-shadow: 0 0 0 0 rgba(203, 163, 92, 0); }
}
/* — Main Container — */
.pathfinder-container {
background: linear-gradient(-45deg, var(–path-dark), var(–path-forest), var(–path-leather), var(–path-dark));
background-size: 400% 400%;
animation: gradientFlow 30s ease infinite;
padding: 80px 30px;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
color: var(–path-cream);
line-height: 1.8;
border-radius: 12px;
box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}
.pathfinder-wrapper {
max-width: 900px;
margin: 0 auto;
}
/* — Typography — */
.path-ayah {
text-align: center;
font-size: 1.4rem;
font-style: italic;
color: var(–path-gold);
margin-bottom: 40px;
opacity: 0;
animation: heavySlideUp 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards 0.3s;
}
.path-title {
text-align: center;
color: white;
font-size: 3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 2rem;
text-shadow: 0 4px 8px rgba(0,0,0,0.4);
opacity: 0;
animation: heavySlideUp 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
.path-intro {
font-size: 1.2rem;
margin-bottom: 50px;
text-align: center;
opacity: 0;
animation: heavySlideUp 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards 0.5s;
}
.highlight-gold { color: var(–path-gold); font-weight: bold; }
/* — Feature Box — */
.path-kit-box {
background: rgba(44, 76, 59, 0.7); /* Forest green glass */
backdrop-filter: blur(10px);
border: 2px solid var(–path-leather);
border-radius: 20px;
padding: 40px;
margin: 40px 0;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
opacity: 0;
animation: heavySlideUp 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards 0.8s;
}
.path-kit-title {
font-size: 1.8rem;
color: var(–path-gold);
margin-bottom: 25px;
display: flex;
align-items: center;
}
.path-kit-title::before {
content: ‘🧭’; /* Compass emoji as placeholder icon */
font-size: 2rem;
margin-right: 15px;
animation: compassPulse 2s infinite;
border-radius: 50%;
}
.path-list {
list-style: none;
padding: 0;
}
.path-list li {
margin-bottom: 20px;
padding-left: 30px;
position: relative;
font-size: 1.1rem;
}
.path-list li::before {
content: ‘✓’;
position: absolute;
left: 0;
color: var(–path-gold);
font-weight: bold;
}
/* — CTA Section — */
.path-cta {
text-align: center;
margin-top: 60px;
opacity: 0;
animation: heavySlideUp 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards 1.2s;
}
.path-button {
display: inline-block;
padding: 20px 50px;
background: linear-gradient(to right, var(–path-leather), var(–path-gold));
color: var(–path-cream);
text-decoration: none;
font-size: 1.3rem;
font-weight: bold;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 30px rgba(139, 90, 43, 0.4);
transition: all 0.4s ease;
border: 2px solid var(–path-gold);
}
.path-button:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(203, 163, 92, 0.6);
background: linear-gradient(to right, var(–path-gold), var(–path-leather));
color: white;
}
/* Responsive */
@media (max-width: 768px) {
.path-title { font-size: 2.2rem; }
.pathfinder-container { padding: 40px 20px; }
.path-kit-box { padding: 25px; }
}
“Guide us to the straight path.” (Surah Al-Fatihah: 6)
The Pathfinder’s Course
You have maps for the dunya—for your career, your finances, and your travels. But do you have a map for your soul?
In a world that constantly demands you to be someone else, finding your true direction can feel impossible. We get distracted, disheartened, and lost in the noise. This course is your invitation to stop wandering and start walking with purpose.
Your Spiritual Survival Kit
Just like the satchel in the image holds essential tools, this course equips you with the internal resources needed for the journey of life. We move beyond abstract concepts to practical application.
- The Divine Compass (Fitrah & Aqeedah): Realign your internal compass with your Creator. Learn to trust the intuitive guidance Allah placed within you, supported by unshakable belief.
- The Master Map (Qur’an & Sunnah): Learn how to read the ultimate guidebook. We don’t just recite; we extract actionable direction for modern dilemmas—from ethical career choices to navigating relationships.
- The Traveler’s Journal (Self-Reflection): Develop the habit of Muhasabah (self-inventory). Understand your strengths, weaknesses, and the unique path Allah has carved out for you.
- Navigating Storms (Resilience & Tawakkul): What happens when the path disappears? Learn the art of reliance on Allah when the means of the dunya fail.
This is not just another lecture series. It is a structured intervention for your life. It is time to pack your bag with the right knowledge and step onto the path that leads to success in both worlds.
Are you ready to navigate your journey with confidence?
Enroll Now & Begin Your Journey