/*=========================================================
 SHRI SHIVAYOGI AJJANAVAR EDUCATIONAL & RURAL DEVELOPMENT
 PROFESSIONAL WEBSITE STYLE SHEET
=========================================================*/


/* GOOGLE FONTS */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Kannada:wght@400;500;700&family=Poppins:wght@300;400;500;600;700;800&display=swap');



/*=========================================================
 ROOT VARIABLES
=========================================================*/


:root{

--primary:#B85C00;

--secondary:#5B1E1E;

--gold:#D4AF37;

--cream:#FFFDF8;

--white:#ffffff;

--dark:#333333;

--gray:#666666;

--light:#f7f5ef;


--shadow:
0 10px 35px rgba(0,0,0,0.10);


--transition:
all .35s ease;


--radius:
15px;

}



/*=========================================================
 RESET
=========================================================*/


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:'Poppins',sans-serif;

background:var(--cream);

color:var(--dark);

line-height:1.7;

overflow-x:hidden;

}



body::selection{

background:var(--primary);

color:white;

}



img{

width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

}



ul{

list-style:none;

}



.container{

width:90%;

max-width:1280px;

margin:auto;

}



.section{

padding:60px 0;

}



.text-center{

text-align:center;

}



/*=========================================================
 HEADINGS
=========================================================*/


.section-title{

font-size:42px;

font-weight:700;

color:var(--secondary);

margin-bottom:12px;

position:relative;

}



.section-title::after{

content:"";

display:block;

width:80px;

height:4px;

background:var(--gold);

margin:15px auto;

border-radius:10px;

}



.section-subtitle{

max-width:750px;

margin:auto;

font-size:17px;

color:var(--gray);

}




/*=========================================================
 BUTTONS
=========================================================*/


.btn{

display:inline-block;

padding:14px 35px;

background:var(--primary);

color:white;

font-weight:600;

border-radius:50px;

transition:var(--transition);

}



.btn:hover{

background:var(--secondary);

transform:translateY(-5px);

box-shadow:0 10px 20px rgba(0,0,0,.15);

}



.btn-outline{

background:transparent;

border:2px solid var(--gold);

color:white;

margin-left:15px;

}



.btn-outline:hover{

background:var(--gold);

color:var(--secondary);

}



/*=========================================================
 HEADER
=========================================================*/


header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(255,255,255,.95);

backdrop-filter:blur(12px);

box-shadow:0 3px 20px rgba(0,0,0,.08);

}



.navbar{

height:95px;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo-area{

display:flex;

align-items:center;

gap:5px;

}



.logo{

height:85px;

width:85px;

border-radius:25%;

object-fit:cover;
 box-shadow: 0 2px 4px 2px rgba(209, 190, 190, 0.3)



}



.site-name{

font-family:'Noto Sans Kannada';

font-weight:700;

font-size:21px;

line-height:1.5;

color:var(--secondary);

}



/*=========================================================
 NAVIGATION
=========================================================*/


.nav-menu{

display:flex;

align-items:center;

gap:30px;

}



.nav-menu li a{

font-weight:600;

font-size:15px;

position:relative;

transition:.3s;

}



.nav-menu li a:hover{

color:var(--primary);

}



.nav-menu li a:not(.donate-btn)::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}



.nav-menu li a:hover::after{

width:100%;

}



.donate-btn{

background:var(--secondary);

padding:12px 25px;

border-radius:50px;

color:white!important;

}



.donate-btn:hover{

background:var(--primary);

}



.menu-btn{

display:none;

font-size:28px;

cursor:pointer;

color:var(--secondary);

}



/*=========================================================
 HERO SECTION
=========================================================*/


.hero{

height:100vh;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),
url("../images/img4.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}



.hero-content{

color:white;

max-width:900px;

padding-top:80px;

}



.hero h1{

font-family:'Noto Sans Kannada';

font-size:48px;

font-weight:700;

line-height:1.5;

margin-bottom:20px;

}



.hero h2{

font-size:28px;

font-weight:500;

margin-bottom:20px;

}



.hero p{

font-size:18px;

margin-bottom:35px;

color:#eee;

}
/*=========================================================
 ABOUT SECTION
=========================================================*/


.about-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:70px;

align-items:center;

}



.about-image img{

border-radius:20px;

box-shadow:var(--shadow);

transition:var(--transition);

}



.about-image img:hover{

transform:scale(1.03);

}



.about-content h2{

font-size:40px;

color:var(--secondary);

margin-bottom:20px;

}



.about-content p{

font-size:16px;

color:var(--gray);

margin-bottom:18px;

}



/*=========================================================
 VISION MISSION
=========================================================*/


.vm-section{

background:#fff;

}



.vm-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

margin-top:50px;

}



.vm-card{

background:white;

padding:40px;

border-radius:var(--radius);

box-shadow:var(--shadow);

border-top:5px solid var(--gold);

transition:var(--transition);

}



.vm-card:hover{

transform:translateY(-12px);

}



.vm-card i{

font-size:45px;

color:var(--primary);

margin-bottom:20px;

}



.vm-card h3{

font-size:28px;

color:var(--secondary);

margin-bottom:15px;

}



.vm-card p{

color:var(--gray);

}



/*=========================================================
 PROGRAM CARDS
=========================================================*/


.program-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:50px;

}



.program-card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}



.program-card:hover{

transform:translateY(-10px);

}



.program-card img{

height:240px;

object-fit:cover;

}



.program-content{

padding:25px;

}



.program-content h3{

font-size:23px;

color:var(--secondary);

margin-bottom:12px;

}



.program-content p{

color:var(--gray);

margin-bottom:20px;

}



.program-content .btn{

padding:10px 25px;

font-size:14px;

}




/*=========================================================
 CSR SECTION
=========================================================*/


.csr-section{

background:var(--light);

}



.csr-section .about-grid{

align-items:center;

}




/*=========================================================
 STATISTICS
=========================================================*/


.stats-section{

padding:80px 0;

background:

linear-gradient(
135deg,
var(--secondary),
var(--primary)
);

color:white;

}



.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}



.stat-box{

text-align:center;

padding:30px;

}



.stat-box i{

font-size:45px;

color:var(--gold);

margin-bottom:20px;

}



.stat-box h2{

font-size:45px;

font-weight:700;

}



.stat-box p{

font-size:17px;

}



/*=========================================================
 GALLERY
=========================================================*/


.gallery-preview{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:50px;

}



.gallery-preview img{

height:260px;

object-fit:cover;

border-radius:15px;

transition:var(--transition);

}



.gallery-preview img:hover{

transform:scale(1.05);

box-shadow:var(--shadow);

}



/*=========================================================
 TESTIMONIALS
=========================================================*/


.testimonial-section{

background:#fff;

}



.testimonial-box{

max-width:750px;

margin:50px auto 0;

background:white;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);

}



.testimonial-box i{

font-size:45px;

color:var(--gold);

}



.testimonial-box p{

font-size:20px;

font-style:italic;

margin:25px 0;

color:var(--gray);

}



.testimonial-box h4{

color:var(--secondary);

}




/*=========================================================
 CALL TO ACTION
=========================================================*/


.cta-section{

padding:80px 0;

background:

linear-gradient(
rgba(0,0,0,.6),
rgba(0,0,0,.6)
),

url("../images/mount3.jpg");

background-size:cover;

background-position:center;

color:white;

text-align:center;

}



.cta-section h2{

font-size:40px;

margin-bottom:20px;

}



.cta-section p{

font-size:18px;

margin-bottom:30px;

}



/*=========================================================
 FOOTER
=========================================================*/


footer{

background:#2b1212;

color:white;

padding:70px 0 20px;

}



.footer-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:40px;

}



.footer-grid h3{

font-size:22px;

color:var(--gold);

margin-bottom:20px;

}



.footer-grid p{

color:#ddd;

font-size:15px;

}



.footer-grid ul li{

margin-bottom:12px;

}



.footer-grid ul li a{

color:#ddd;

transition:.3s;

}



.footer-grid ul li a:hover{

color:var(--gold);

}




.social-icons{

display:flex;

gap:15px;

}



.social-icons a{

height:40px;

width:40px;

border-radius:50%;

background:var(--primary);

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}



.social-icons a:hover{

background:var(--gold);

color:var(--secondary);

}



.copyright{

border-top:1px solid rgba(255,255,255,.2);

margin-top:40px;

padding-top:20px;

text-align:center;

color:#ccc;

}



/*=========================================================
 FLOATING BUTTONS
=========================================================*/


.back-top,
.whatsapp{

position:fixed;

bottom:25px;

height:50px;

width:50px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:22px;

z-index:999;

}



.back-top{

right:25px;

background:var(--secondary);

}



.whatsapp{

left:25px;

background:#25D366;

}



/*=========================================================
 ANIMATIONS
=========================================================*/


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}



.fade-up{

animation:fadeUp .8s ease;

}
/*=========================================================
 INNER PAGE COMMON BANNER
=========================================================*/


.page-banner{

height:55vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),

url("../images/mount3.jpg");

background-size:85%;

background-position:center;

color:rgb(244, 240, 240);

margin-top:95px;

}



.page-banner h1{

font-family:'Noto Sans Kannada';

font-size:48px;

font-weight:700;

}



/*=========================================================
 ABOUT PAGE
=========================================================*/


.history-box{

background:white;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);

margin-top:40px;

}



.history-box h3{

font-size:30px;

color:var(--secondary);

margin-bottom:20px;

}



.history-box p{

color:var(--gray);

line-height:2;

}



/* Timeline */


.timeline{

position:relative;

margin-top:50px;

}



.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

height:100%;

width:3px;

background:var(--gold);

transform:translateX(-50%);

}



.timeline-item{

display:flex;

justify-content:space-between;

margin-bottom:50px;

}



.timeline-content{

width:45%;

background:white;

padding:30px;

border-radius:15px;

box-shadow:var(--shadow);

}



.timeline-content h3{

color:var(--secondary);

margin-bottom:10px;

}



.timeline-content p{

color:var(--gray);

}





/*=========================================================
 PROGRAM PAGE
=========================================================*/


.program-detail-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:50px;

}



.program-detail-card{

background:white;

padding:35px;

border-radius:18px;

box-shadow:var(--shadow);

text-align:center;

transition:var(--transition);

}



.program-detail-card:hover{

transform:translateY(-10px);

}



.program-detail-card i{

font-size:50px;

color:var(--primary);

margin-bottom:20px;

}



.program-detail-card h3{

font-size:25px;

color:var(--secondary);

margin-bottom:15px;

}



.program-detail-card p{

color:var(--gray);

}



/*=========================================================
 CSR PAGE
=========================================================*/


.csr-box{

background:white;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);

margin-bottom:35px;

}



.csr-box h3{

font-size:30px;

color:var(--secondary);

margin-bottom:20px;

}



.csr-box ul{

margin-top:20px;

}



.csr-box ul li{

margin-bottom:15px;

padding-left:30px;

position:relative;

}



.csr-box ul li::before{

content:"✓";

position:absolute;

left:0;

color:var(--primary);

font-weight:bold;

}





/*=========================================================
 GALLERY PAGE
=========================================================*/


.gallery-filter{

display:flex;

justify-content:center;

gap:20px;

margin:40px 0;

flex-wrap:wrap;

}



.gallery-filter button{

padding:12px 28px;

border:none;

background:white;

border-radius:50px;

cursor:pointer;

font-weight:600;

box-shadow:var(--shadow);

transition:.3s;

}



.gallery-filter button:hover,
.gallery-filter button.active{

background:var(--primary);

color:white;

}



.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}



.gallery-item{

overflow:hidden;

border-radius:18px;

position:relative;

}



.gallery-item img{

height:320px;

object-fit:cover;

transition:.5s;

}



.gallery-item:hover img{

transform:scale(1.1);

}



.gallery-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.5);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.4s;

}



.gallery-item:hover .gallery-overlay{

opacity:1;

}



.gallery-overlay i{

font-size:40px;

color:white;

}



/*=========================================================
 CONTACT PAGE
=========================================================*/


.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}



.contact-box{

background:white;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}



.contact-box h3{

font-size:30px;

color:var(--secondary);

margin-bottom:25px;

}



.contact-item{

display:flex;

gap:20px;

margin-bottom:25px;

align-items:center;

}



.contact-item i{

height:45px;

width:45px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

color:white;

}



.contact-item p{

color:var(--gray);

}





/* FORM */


.contact-form input,
.contact-form textarea{

width:100%;

padding:15px;

border:1px solid #ddd;

border-radius:10px;

margin-bottom:20px;

font-family:Poppins;

outline:none;

}



.contact-form textarea{

height:160px;

resize:none;

}



.contact-form input:focus,
.contact-form textarea:focus{

border-color:var(--primary);

}



.map-box iframe{

width:100%;

height:400px;

border:0;

border-radius:20px;

}





/*=========================================================
 COMMON CARDS
=========================================================*/


.card{

background:white;

padding:30px;

border-radius:15px;

box-shadow:var(--shadow);

transition:.3s;

}



.card:hover{

transform:translateY(-8px);

}



/*=========================================================
 IMAGE HOVER
=========================================================*/


.zoom-image{

overflow:hidden;

border-radius:15px;

}



.zoom-image img{

transition:.5s;

}



.zoom-image:hover img{

transform:scale(1.1);

}
/*=========================================================
 UTILITY CLASSES
=========================================================*/


.mt-20{
margin-top:20px;
}


.mt-40{
margin-top:40px;
}


.mb-20{
margin-bottom:20px;
}


.mb-40{
margin-bottom:40px;
}


.flex{

display:flex;

}



.align-center{

align-items:center;

}



.justify-center{

justify-content:center;

}



.gap-20{

gap:20px;

}



/*=========================================================
 SECTION BACKGROUND VARIATIONS
=========================================================*/


.bg-light{

background:var(--light);

}



.bg-white{

background:white;

}





/*=========================================================
 SCROLL REVEAL ANIMATION
=========================================================*/


.reveal{

opacity:0;

transform:translateY(40px);

transition:1s ease;

}



.reveal.active{

opacity:1;

transform:translateY(0);

}





/*=========================================================
 LOADING SCREEN
=========================================================*/


.loader{

position:fixed;

top:0;

left:0;

height:100vh;

width:100%;

background:var(--cream);

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

}



.loader span{

height:60px;

width:60px;

border:6px solid #ddd;

border-top-color:var(--primary);

border-radius:50%;

animation:rotate 1s linear infinite;

}



@keyframes rotate{

100%{

transform:rotate(360deg);

}

}





/*=========================================================
 BUTTON ANIMATION
=========================================================*/


.btn{

position:relative;

overflow:hidden;

}



.btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

height:100%;

width:100%;

background:rgba(255,255,255,.25);

transition:.4s;

}



.btn:hover::before{

left:100%;

}





/*=========================================================
 CARD ICON STYLE
=========================================================*/


.icon-circle{

height:80px;

width:80px;

border-radius:50%;

background:#fff3e5;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

margin-bottom:25px;

}



.icon-circle i{

font-size:35px;

color:var(--primary);

}





/*=========================================================
 DONATE PAGE
=========================================================*/


.donation-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:40px;

}



.single-donation-grid{

grid-template-columns:1fr;
	justify-items:center;

}



.single-donation-card{
	max-width:620px;
	width:100%;
	background:linear-gradient(135deg, #fff, #fffaf4);
	border:2px solid rgba(184, 92, 0, 0.25);
	box-shadow:0 18px 45px rgba(184, 92, 0, 0.12);

}



.donation-card{

background:white;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

transition:var(--transition);

}



.donation-card:hover{

transform:translateY(-8px);

}



.donate-qr-section,
.donate-impact-section,
.donate-note-section{
	padding-top:18px;
	padding-bottom:20px;
}



.donation-qr-layout{
	display:grid;
	grid-template-columns:320px 1fr;
	gap:35px;
	align-items:center;
	margin-top:10px;
}



.qr-box{
	background:linear-gradient(135deg, #fff, #fff9f1);
	padding:24px;
	border:2px solid var(--gold);
	border-radius:18px;
	box-shadow:0 0 0 8px rgba(212, 175, 55, 0.08), 0 12px 30px rgba(184, 92, 0, 0.12);
	width:fit-content;
	margin:0 auto;
}



.qr-box img{
	width:240px;
	height:240px;
	object-fit:contain;
	margin:auto;
	filter:drop-shadow(0 12px 16px rgba(0,0,0,0.08));
	transform:scale(1.08);
	transition:transform .25s ease;
}



.qr-box:hover img{
	transform:scale(1.12);
}



.donation-qr-content{
	text-align:left;
}



.donation-qr-content h3{
	font-size:30px;
	color:var(--secondary);
	margin-bottom:16px;
}



.donation-qr-content p{
	color:var(--gray);
	margin-bottom:16px;
	line-height:1.9;
}



.donation-card h3{

font-size:24px;

color:var(--secondary);

margin-bottom:12px;

letter-spacing:0.02em;

}



.donation-card p{

color:var(--gray);

margin-bottom:18px;

}



.donation-meta{

display:flex;

justify-content:space-between;

gap:15px;

padding-top:15px;

border-top:1px solid #eee;

color:var(--dark);

font-size:14px;

background:rgba(184, 92, 0, 0.03);

border-radius:12px;

padding:14px 16px;

margin-top:18px;

}



.check-list{

margin-top:20px;

padding-left:0;

list-style:none;

}



.check-list li{

position:relative;

padding-left:30px;

margin-bottom:12px;

color:var(--gray);

}



.check-list li::before{

content:"✓";

position:absolute;

left:0;

color:var(--primary);

font-weight:700;

}



/*=========================================================
 NEWS / EVENT SECTION
=========================================================*/


.news-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.news-card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

}



.news-card img{

height:220px;

object-fit:cover;

}



.news-content{

padding:25px;

}



.news-content h3{

color:var(--secondary);

margin-bottom:10px;

}



.news-content p{

color:var(--gray);

}





/*=========================================================
 RESPONSIVE PREPARATION
=========================================================*/


.hide{

display:none;

}



.show{

display:block;

}




/*=========================================================
 PRINT STYLE
=========================================================*/


@media print{


header,
footer,
.btn,
.whatsapp,
.back-top{

display:none;

}


body{

background:white;

}


}

.image-popup{

position:fixed;

inset:0;

background:rgba(0,0,0,.85);

z-index:99999;

display:flex;

align-items:center;

justify-content:center;

}


.invitation-popup{

position:fixed;

inset:0;

background:rgba(0,0,0,.75);

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

padding:20px;

}


.invitation-popup.hidden{

display:none;

}


.invitation-popup-inner{

position:relative;

max-width:680px;

width:100%;

background:#fff;

padding:18px;

border-radius:18px;

box-shadow:0 25px 60px rgba(0,0,0,.30);

}


.invitation-popup-inner img{

width:100%;

border-radius:12px;

}


.invitation-close{

position:absolute;

top:-14px;

right:-14px;

height:40px;

width:40px;

border:none;

border-radius:50%;

background:var(--secondary);

color:#fff;

font-size:28px;

line-height:1;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}


.popup-content{

position:relative;

max-width:1100px;

width:90%;

}


.popup-content img{

border-radius:15px;

}


.close-popup{

position:absolute;

top:-40px;

right:0;

font-size:35px;

color:white;

cursor:pointer;

}

/* =========================================
   SIMPLE PROFESSIONAL PAGE TRANSITION
========================================= */


body{

opacity:0;

animation:pageLoad .4s ease forwards;

}



@keyframes pageLoad{

from{

opacity:0;

}


to{

opacity:1;

}

}




body.fade-out{

opacity:0;

transition:opacity .35s ease;

}

/*=========================================================
 END OF STYLE.CSS
=========================================================*/