*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
:root{
--color-primary: #6c63ff;
--color-success: #00bf8e;
--color-warning: #f7c94b;
--color-danger: #f75842;
--color-white: #fff;
--red:#d62828;
--bg:#f5f5f5;
--muted:#666;
--color-light: rgba(255, 255, 255, 0.7);
--color-danger-varlent: rgba(247, 88, 66, 0.4);
--color-bg: #1f2641;
--color-black: #000;
--color-bg1: #2e3267;
--color-bg2: #424890;
--container-width-lg: 80%;
--container-width-md: 90%;
--container-width-sm: 94%;
--transition: all 400ms ease;
}
body{
font-family: "Montserrat" sans-serif;
line-height: 1.7;
color: var(--color-white);
background: var(--color-bg);
}
.container{
width: var(--container-width-lg);
margin: 0 auto;
}
/* Hero
.hero{position:relative;height:800px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;filter:contrast(1) saturate(1); margin-top: 2.6rem;}
.hero-text{position:absolute;left:30px;bottom:60px;background:linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.45));color:#fff;padding:20px;border-radius:8px;max-width:640px}
.hero-text .tag{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#ffd2d2;margin-bottom:6px}
.hero-text h1{margin:0 0 8px;font-size:28px}
.hero-text p{margin:0 0 12px;color:#f1f1f1}
.cta{display:inline-block;background:var(--red);color:#fff;padding:8px 12px;border-radius:6px;text-decoration:none;font-weight:600}*/
section{
padding: 4rem 0;
}
section h2{
text-align: center;
margin-bottom: 4rem;
}
h1, h2, h3, h4, h5{
line-height: 1.2;
}
h2{
font-size: 2rem;
}
h3{
font-size: 1.6rem;
}
h4{
font-size: 1.3rem;
}
a{
color: var(--color-white);
}
img{
width: 100%;
display: block;
object-fit: cover;
}
.btn{
display: inline-block;
background: var(--color-danger);
color: var(--color-black);
padding: 1rem 2rem;
border: 1px solid transparent;
font-weight: 500;
transition: var(--transition);
}
.btn:hover{
background: transparent;
color: var(--color-white);
border: var(--color-white);
}
.btn.primary{
background: var(--color-danger);
color: var(--color-danger);
}
/* ============== Navbar================*/
/* ================= NAVBAR ================= */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5rem;
background: transparent;
z-index: 1000;
transition: var(--transition);
}
nav.window-scroll {
background: var(--color-primary);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.nav_container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-weight: 700;
font-size: 1rem;
}
/* ================= DESKTOP MENU ================= */
.nav_menu {
display: flex;
align-items: center;
gap: 4rem;
}
.nav_menu a {
font-size: 0.9rem;
transition: var(--transition);
}
.nav_menu a:hover {
color: var(--color-bg2);
}
/* ================= MENU BUTTONS ================= */
nav button {
display: none;
background: transparent;
border: none;
cursor: pointer;
z-index: 1002;
}
nav button img {
width: 2rem;
}
/* ================= MOBILE MENU ================= */
@media screen and (max-width: 1024px) {
nav button {
display: inline-block;
}
#close-menu-btn {
display: none;
}
.nav_menu {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 18rem;
background: var(--color-bg1);
flex-direction: column;
padding-top: 6rem;
gap: 0;
transition: right 0.4s ease;
z-index: 1001;
}
.nav_menu.open {
right: 0;
}
.nav_menu li {
width: 100%;
height: 5.5rem;
opacity: 0;
transform: rotateZ(-90deg) rotateX(90deg) scale(0.2);
animation: animateNavItems 400ms forwards;
}
.nav_menu.open li {
opacity: 1;
transform: none;
}
.nav_menu li:nth-child(2) { animation-delay: 0.1s; }
.nav_menu li:nth-child(3) { animation-delay: 0.2s; }
.nav_menu li:nth-child(4) { animation-delay: 0.3s; }
.nav_menu li:nth-child(5) { animation-delay: 0.4s; }
.nav_menu li a {
width: 100%;
height: 100%;
display: grid;
place-items: center;
background: var(--color-primary);
box-shadow: -4rem 6rem 10rem rgba(0, 0, 0, 0.6);
}
.nav_menu li a:hover {
background: var(--color-bg2);
}
}
/* ================= ANIMATION ================= */
@keyframes animateNavItems {
to {
opacity: 1;
transform: rotateZ(0) rotateX(0) scale(1);
}
}
/* ============== Header================*/
header{
position: relative;
top: 7rem;
overflow: hidden;
height: 80vh;
margin-bottom: 8rem;
}
.header_container{
display: grid;
grid-template-columns: 40% 60%;
align-items: center;
gap: 8rem;
height: 100%;
}
.header_left p{
margin: 1rem 0 2.4rem;
}
.header_left{
margin-bottom: 10rem;
}
/* ============== Categories================*/
.categories{
background: var(--color-bg1);
}
#learn_more{
box-shadow: var(--color-white);
}
.categories h1{
line-height: 1;
margin-bottom: 3rem;
}
.categories_container{
display: grid;
grid-template-columns: 40% 60%;
}
.categories_left{
margin: 4rem;
}
.categories_left p{
margin: 1rem 0 3rem;
}
.categories_right{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.category{
background: var(--color-bg2);
padding: 2rem;
border-radius: 2rem;
transition: var(--transition);
}
.category:hover{
box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.8);
z-index: 1;
}
.category-icon img{
height: 20vh;
}
.bx-building-house{
width: 2rem;
}
/*============== coursespoor================*/
.coursespoor{
margin-top: 2rem;
}
.coursespoor-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.course{
background: var(--color-bg1);
text-align: center;
border: 1px solid transparent;
transition: var(--transition);
padding: 2rem;
border-radius: 2rem;
}
.course:hover{
box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.8);
z-index: 1;
}
.course-image{
height: 30vh;
}
.course-info{
padding: 2rem;
margin-top: 3rem;
}
.course-info p{
margin: 1.2rem 0 2rem;
font-size: 0.9;
}
/*============== faqs================*/
.faqs{
background: var(--color-bg1);
box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
}
.faqs_container{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.faq{
padding: 1rem;
display: flex;
align-items: center;
gap: 1.4rem;
background: var(--color-primary);
cursor: pointer;
}
.faq h4 {
font-size: 1rem;
line-height: 2.2;
}
.faq_icon{
align-self: flex-start;
font-size: 1.2rem;
}
.faq p{
margin-top: 0.8rem;
display: none;
}
.faq.open p{
display: block;
}
/* FAQ Animation */
.faq .question_answer p,
.faq .faq_cta {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease;
}
.faq.open .question_answer p,
.faq.open .faq_cta {
max-height: 500px;
opacity: 1;
}
/* Rotate plus icon */
.faq.open .faq_icon i {
transform: rotate(45deg);
transition: transform 0.3s ease;
}
/* Bible Verse Styling */
.faq_verse {
margin-top: 3rem;
font-size: 1.1rem;
text-align: center;
font-style: italic;
}
.faq_verse i {
font-size: 1.6rem;
color: var(--color-primary);
margin-right: 0.3rem;
}
.faq_verse span {
display: block;
margin-top: 0.5rem;
font-weight: 600;
}
.faq_cta {
margin-top: 1rem;
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
}
.btn.small {
padding: 0.4rem 1rem;
font-size: 0.85rem;
}
.btn.outline {
background: transparent;
border: 1px solid var(--color-primary);
color: var(--color-primary);
}
/* Scroll animation */
.faq {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.faq.in-view {
opacity: 1;
transform: translateY(0);
}
/* Highlight opened FAQ */
.faq.open {
background: rgba(108, 99, 255, 0.05); /* uses your primary color softly */
border-left: 4px solid var(--color-primary);
transition: background 0.3s ease;
}
/*============== Testimonials================*/
.testimonials_container{
overflow-x: hidden;
position: relative;
margin-bottom: 5rem;
margin-top: 4rem;
}
.testimonial{
padding-top: 2rem;
}
.avater{
width: 6rem;
height: 6rem;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 0.8rem;
border: 1rem solid var(--color-bg1);
}
.testimonial_info{
text-align: center;
}
.testimonial_body{
background: var(--color-primary);
padding: 2rem;
margin-top: 3rem;
position: relative;
}
.testimonial_body::before{
content: "";
display: block;
background: linear-gradient(135deg, transparent, var(--color-primary), var(--color-primary), var(--color-primary));
width: 3rem;
height: 3rem;
position: absolute;
left: 47%;
top: -1.5rem;
transform: rotate(45deg);
}
.swiper-pagination{
margin-bottom: 10rem;
}
/*============== Footer ================*/
footer{
background: var(--color-bg1);
padding-top: 5rem;
font-size: 0.9rem;
}
.footer_container{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5rem;
}
.footer_container > div h4{
margin-bottom: 1.2rem;
}
.footer_logo{
margin: 0 2rem;
}
footer ul li{
margin-bottom: 0.7rem;
}
footer ul li a:hover{
text-decoration: underline;
}
.footer_socials{
display: flex;
gap: 1rem;
font-size: 1.2rem 0;
margin-top: 2rem;
}
.footer_copyright{
text-align: center;
margin-top: 4rem;
padding: 1.2rem 0;
border-top: 1px solid var(--color-bg2);
}
/* ===== HERO SLIDER ===== */
.hero-slider{
margin-top:5rem;
height:80vh;
position:relative;
}
.slider{
height:100%;
position:relative;
overflow:hidden;
}
.slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity 0.8s ease-in-out;
}
.slide.active{
opacity:1;
}
.slide::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.45);
}
.slide-caption{
position:absolute;
bottom:20%;
left:10%;
color:#fff;
max-width:500px;
z-index:2;
}
.slide-caption h1{font-size:2.5rem;}
.slide-caption p{margin:1rem 0;}
.prev,.next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:#fff;
font-size:2.5rem;
padding:0.5rem 1rem;
border:none;
cursor:pointer;
z-index:3;
}
.prev{left:20px;}
.next{right:20px;}
@media(max-width:768px){
.slide-caption h1{font-size:1.8rem;}
.hero-slider{height:65vh;}
}
/*============== Media query(Tablet) ================*/
@media screen and (max-width: 1024px){
.container{
width: var(--container-width-md);
}
h1{
font-size: 2.2rem;
}
h2{
font-size: 1.7rem;
}
h3{
font-size: 1.4rem;
}
h4{
font-size: 1.2rem;
}
/*============== Header ================*/
header{
height: 62vh;
margin-bottom: 10rem;
}
.header_container{
gap: 0;
padding-bottom: 3rem;
}
/*============== Get involved ================*/
.categories{
height: auto;
}
.categories_container{
grid-template-columns: 1fr;
gap: 3rem;
}
.categories_left{
margin: 0;
}
/*============== Our gallery ================*/
.coursespoor{
margin-top: 0;
}
.coursespoor-container{
grid-template-columns: 1fr 1fr;
}
/*============== FAQs ================*/
.faqs_container{
grid-template-columns: 1fr;
}
.faq{
padding: 1.5rem;
}
/*============== Footer ================*/
.footer_container{
grid-template-columns: 1fr 1fr;
}
}
/*============== Media query(phone) ================*/
@media screen and (max-width: 600px) {
.container{
width: var(--container-width-sm);
}
.nav_menu{
right: 3%;
}
.header_container{
grid-template-columns: 1fr;
text-align: center;
margin-top  : 0;
}
.header_left{
margin-bottom: 1.3rem;
}
.categories_right{
grid-template-columns: 1fr 1fr;
gap: 0,7rem;
}
.category{
padding: 1rem;
border-radius: 1rem;
}
.category-icon{
margin-top: 1rem;
display: inline-block;
}
.coursespoor-container{
grid-template-columns: 1fr;
}
.testimonial_body{
padding: 1.2rem;
}
.footer_container{
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
footer_1 p{
margin: 1rem auto;
}
.footer_socials{
justify-content: center;
}
}
.section-title{
text-align:center;
margin-bottom:2rem;
}
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
}
.card{
background:var(--color-bg1);
border-radius:1.5rem;
overflow:hidden;
transition:var(--transition);
}
.card:hover{
box-shadow:0 2rem 3rem rgba(0,0,0,0.5);
}
.card img{height:220px;}
.card-content{padding:1.5rem;}
@media(max-width:900px){
.grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.grid{grid-template-columns:1fr}
}
/* ================= SUPPORT INTRO ================= */
.support_intro {
margin-top: 6rem;
background: var(--color-bg1);
padding: 4rem 0;
}
.support_container {
text-align: center;
}
.support_container h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.support_container h3 {
color: var(--color-warning);
margin-bottom: 1.5rem;
}
.support_container p {
max-width: 800px;
margin: 0 auto 3rem;
color: #ddd;
}
/* ================= MISSION & VISION ================= */
.mission_vision {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.mv_card {
background: var(--color-bg);
padding: 2.5rem;
border-radius: 1.5rem;
transition: var(--transition);
}
.mv_card:hover {
box-shadow: 0 2rem 3rem rgba(0,0,0,0.4);
}
.mv_card h2 {
color: var(--color-success);
margin-bottom: 1rem;
}
/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
.mission_vision {
grid-template-columns: 1fr;
}
}
/* ================= CLICKABLE SUPPORT SECTIONS ================= */
.support_intro a{
color: inherit;
}
.click_card{
display: block;
background: var(--color-bg1);
padding: 2.5rem;
border-radius: 1.5rem;
transition: var(--transition);
height: 100%;
}
.click_card:hover{
box-shadow: 0 2rem 3rem rgba(0,0,0,0.4);
transform: translateY(-5px);
}
.click_card h2{
color: var(--color-success);
margin-bottom: 1rem;
}
.click_card p{
color: #ddd;
}
.click_card span{
display: inline-block;
margin-top: 1.5rem;
color: var(--color-warning);
font-weight: 600;
}
/* ================= RESPONSIVE ================= */
/* Donate button in navbar */
.footer-donate-btn{
display: inline-block;
margin-top: 1rem;
background: var(--color-success);
color: #fff;
padding: 0.7rem 1.5rem;
border-radius: 2rem;
font-weight: 600;
}
.footer-donate-btn:hover{
background: var(--color-warning);
color: var(--color-black);
}
/* Mobile menu fix */
@media (max-width: 991px){
  .navbar-collapse{background:#5f61ff;}
  .navbar-nav{padding:10px 0;}
  .navbar-nav .nav-link{color:#fff!important;padding:14px 20px;}
  .navbar-toggler{border:0;}
}

@media screen and (max-width: 600px) {
nav button {
display: inline-block;
}
#close-menu-btn {
display: none;
}
.nav_menu {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 18rem;
background: var(--color-bg1);
flex-direction: column;
padding-top: 6rem;
gap: 0;
transition: right 0.4s ease;
z-index: 1001;
}
.nav_menu.open {
right: 0;
}
.nav_menu li {
width: 100%;
height: 5.5rem;
opacity: 0;
transform: rotateZ(-90deg) rotateX(90deg) scale(0.2);
animation: animateNavItems 400ms forwards;
}
.nav_menu.open li {
opacity: 1;
transform: none;
}
.nav_menu li:nth-child(2) { animation-delay: 0.1s; }
.nav_menu li:nth-child(3) { animation-delay: 0.2s; }
.nav_menu li:nth-child(4) { animation-delay: 0.3s; }
.nav_menu li:nth-child(5) { animation-delay: 0.4s; }
.nav_menu li a {
width: 100%;
height: 100%;
display: grid;
place-items: center;
background: var(--color-primary);
box-shadow: -4rem 6rem 10rem rgba(0, 0, 0, 0.6);
}
.nav_menu li a:hover {
background: var(--color-bg2);
}
}