/*====================================================
 ANAND SUDHA
 Official Website
 Version : 1.0
 Theme : Spiritual Light Orange
=====================================================*/

/*=========================
GOOGLE FONTS
==========================*/

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

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

:root{

--primary:#C8661A;
--primary-dark:#9F4E12;
--gold:#C79A2C;
--secondary:#FFF8F0;
--white:#ffffff;
--dark:#332416;
--text:#5A4636;
--gray:#888;
--light:#faf7f3;
--sacred-red:#8E2D23;
--leaf:#466B4D;

--radius:8px;

--shadow:
0 14px 34px rgba(63,45,31,.1);

--transition:.28s ease;

}

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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#fffaf4;

color:var(--text);

overflow-x:hidden;

line-height:1.8;

font-size:16px;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

padding:0;

margin:0;

}

section{

padding:76px 0;

position:relative;

}

/*=========================
TYPOGRAPHY
==========================*/

h1,h2,h3,h4,h5,h6{

font-family:'Playfair Display',serif;

color:var(--dark);

font-weight:700;

line-height:1.3;

}

h1{

font-size:72px;

}

h2{

font-size:48px;

}

h3{

font-size:34px;

}

p{

color:var(--text);

}

.hindi{

font-family:'Noto Serif Devanagari',serif;

}

/*=========================
SECTION TITLE
==========================*/

.section-tag{

display:inline-block;

background:#FFF0DF;

padding:10px 24px;

border-radius:999px;

color:var(--primary);

font-weight:600;

margin-bottom:18px;

}

.section-title{

margin-bottom:20px;

}

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

.btn{

border-radius:999px;

padding:14px 34px;

font-weight:600;

transition:.4s;

}

.btn-warning{

background:var(--primary);

border:none;

color:#fff;

}

.btn-warning:hover{

background:var(--primary-dark);

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(230,126,34,.25);

}

.btn-outline-light{

border:2px solid white;

}

.btn-outline-light:hover{

background:white;

color:var(--primary);

}

.btn-outline-warning{

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

color:var(--primary);

}

.btn-outline-warning:hover{

background:var(--primary);

color:white;

}

/*=========================
LOADER
==========================*/

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:white;

z-index:99999;

display:flex;

align-items:center;

justify-content:center;

}

.loader-logo{

text-align:center;

animation:pulse 2s infinite;

}

.loader-logo img{

width:120px;

margin:auto;

margin-bottom:25px;

}

.loader-logo h3{

color:var(--primary);

margin-bottom:10px;

}

.loader-logo p{

font-size:14px;

}

/*=========================
TOP BAR
==========================*/

.topbar{

background:#4A2D14;

color:white;

padding:8px 0;

font-size:14px;

}

.top-left{

display:flex;

align-items:center;

gap:10px;

}

.top-right{

text-align:right;

}

.top-right a{

display:inline-flex;

align-items:center;

justify-content:center;

width:36px;

height:36px;

border-radius:50%;

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

margin-left:8px;

color:white;

transition:.4s;

}

.top-right a:hover{

background:var(--primary);

transform:translateY(-3px);

}

.top-right a[aria-label="WhatsApp Channel"]:hover,
.social-icons a[aria-label="WhatsApp Channel"]:hover{

background:#25D366;

}

/*=========================
NAVBAR
==========================*/

#header{

position:absolute;

width:100%;

z-index:999;

}

.navbar{

padding:14px 0;

transition:.4s;

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

backdrop-filter:blur(14px);

}

.navbar.scrolled{

position:fixed;

top:0;

left:0;

width:100%;

background:white;

box-shadow:var(--shadow);

animation:slideDown .5s;

}

.navbar-brand{

display:flex;

align-items:center;

gap:10px;

font-size:25px;

font-weight:700;

font-family:'Playfair Display';

color:white;

}

.navbar-brand img{

height:54px;

width:54px;

object-fit:contain;

background:#fff;

padding:5px;

border-radius:8px;

box-shadow:0 8px 22px rgba(0,0,0,.14);

}

.navbar.scrolled .navbar-brand{

color:var(--primary);

}

.nav-link{

color:white;

font-weight:600;

padding:10px 8px !important;

font-size:14px;

white-space:nowrap;

}

.navbar.scrolled .nav-link{

color:var(--dark);

}

.nav-link:hover{

color:var(--primary);

}

.language-switcher{

display:flex;

align-items:center;

padding-left:8px;

}

.lang-toggle{

display:inline-flex;

align-items:center;

gap:4px;

padding:4px;

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

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

border-radius:999px;

}

.navbar.scrolled .lang-toggle,
.navbar:not(.scrolled) .navbar-collapse.show .lang-toggle{

background:#fff3e8;

border-color:rgba(200,102,26,.2);

}

.lang-btn{

border:0;

border-radius:999px;

background:transparent;

color:white;

font-size:13px;

font-weight:700;

line-height:1;

padding:8px 10px;

cursor:pointer;

transition:var(--transition);

}

.navbar.scrolled .lang-btn,
.navbar:not(.scrolled) .navbar-collapse.show .lang-btn{

color:var(--dark);

}

.lang-btn.active{

background:var(--primary);

color:white!important;

box-shadow:0 8px 18px rgba(200,102,26,.25);

}

.lang-hi body,
body.lang-hi{

font-family:'Noto Serif Devanagari','Poppins',sans-serif;

}

.dropdown-menu{

border:none;

border-radius:14px;

box-shadow:var(--shadow);

padding:15px;

}

.dropdown-item{

padding:10px 15px;

border-radius:8px;

}

.dropdown-item:hover{

background:var(--secondary);

color:var(--primary);

}

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

.hero{

height:100vh;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

background:#20140d;

}

main,
section,
footer{

overflow-x:clip;

}

.hero-media{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

background-image:url("../images/banners/home-banner.jpg");

background-size:cover;

background-position:center;

}

.hero-overlay{

position:absolute;

width:100%;

height:100%;

background:
linear-gradient(
90deg,
rgba(19,12,7,.78),
rgba(42,24,12,.52) 48%,
rgba(18,11,7,.66)
);

}

.hero-content{

position:relative;

z-index:2;

color:white;

}

.hero-tag{

display:inline-block;

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

padding:10px 24px;

border-radius:50px;

margin-bottom:20px;

backdrop-filter:blur(10px);

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

}

.hero h1{

font-size:82px;

color:white;

margin-bottom:10px;

}

.hero h2{

font-size:38px;

color:white;

margin-bottom:25px;

}

.hero h2 span{

color:#FFD56A;

}

.hero p{

font-size:20px;

max-width:700px;

margin-bottom:40px;

color:#eee;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.scroll-down{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

color:white;

font-size:34px;

animation:bounce 2s infinite;

z-index:3;

}

/*====================================================
INNER PAGES
====================================================*/

.page-hero{

min-height:430px;

padding:150px 0 92px;

display:flex;

align-items:end;

overflow:hidden;

background:#2d1d12;

}

.page-banner{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}

.page-overlay{

position:absolute;

inset:0;

background:linear-gradient(90deg,rgba(29,18,10,.82),rgba(53,31,16,.55),rgba(29,18,10,.7));

}

.page-content{

position:relative;

z-index:2;

max-width:900px;

}

.page-content h1{

color:white;

font-size:58px;

margin-bottom:14px;

}

.page-content p{

color:#fff1df;

font-size:20px;

margin-bottom:0;

}

.swami-shravananand-hero{

min-height:700px;

align-items:center;

background:
radial-gradient(circle at 78% 42%,rgba(216,141,56,.35),transparent 34%),
linear-gradient(90deg,#24160d 0%,#4b2d18 55%,#2a1a0f 100%);

}

.swami-shravananand-hero .page-banner{

object-fit:contain;

object-position:78% center;

}

.swami-shravananand-hero .page-overlay{

background:linear-gradient(90deg,rgba(29,18,10,.9),rgba(53,31,16,.48),rgba(29,18,10,.08));

}

.swami-shravananand-hero .page-content{

max-width:560px;

}

.swami-shravananand-profile{

width:100%;

max-height:620px;

object-fit:contain;

background:#3b2516;

}

.swami-akhandanand-hero{

min-height:560px;

align-items:center;

background:#4b2d18;

}

.swami-akhandanand-hero .page-banner{

object-position:78% top;

}

.swami-akhandanand-hero .page-overlay{

background:linear-gradient(90deg,rgba(29,18,10,.86),rgba(53,31,16,.42),rgba(29,18,10,.12));

}

.swami-akhandanand-hero .page-content{

max-width:720px;

}

.breadcrumb-section{

padding:18px 0;

background:#fff;

box-shadow:0 8px 24px rgba(63,45,31,.06);

}

.breadcrumb{

margin-bottom:0;

}

.contact-card,
.travel-card,
.contact-box,
.registration-box,
.album-card{

background:white;

border:1px solid rgba(63,45,31,.08);

border-radius:var(--radius)!important;

box-shadow:var(--shadow)!important;

height:100%;

transition:var(--transition);

}

.contact-card:hover,
.travel-card:hover,
.contact-box:hover,
.registration-box:hover,
.album-card:hover{

transform:translateY(-6px);

}

.form-control,
.form-select{

border:1px solid rgba(63,45,31,.16);

border-radius:8px;

padding:14px 16px;

}

.form-control:focus,
.form-select:focus{

border-color:var(--primary);

box-shadow:0 0 0 .2rem rgba(200,102,26,.12);

}

.gallery-item,
.video-thumbnail,
.instagram-preview{

position:relative;

overflow:hidden;

border-radius:8px;

background:#ead8c2;

box-shadow:var(--shadow);

}

.gallery-item img{

height:310px;

width:100%;

object-fit:cover;

transition:.5s;

}

.gallery-large img{

height:646px;

}

.gallery-wide img{

height:340px;

}

.gallery-item img[src*="featured-1"],
.gallery-item img[src*="swami-akhandanand"],
.gallery-item img[src*="swami-shravananand"],
.gallery-item img[src*="bhagavat"]{

object-position:center top;

}

.gallery-item img[src*="guru-purnima"],
.gallery-item img[src*="aradhana"]{

object-position:center 24%;

}

.gallery-overlay{

position:absolute;

inset:auto 0 0 0;

padding:34px 26px 24px;

background:linear-gradient(transparent,rgba(24,15,9,.82));

color:white;

}

.gallery-overlay h4,
.gallery-overlay h5{

color:white;

margin-bottom:0;

}

.gallery-category,
.gallery-overlay span{

display:inline-block;

font-size:13px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.08em;

color:#ffd56a;

margin-bottom:8px;

}

.gallery-item:hover img{

transform:scale(1.05);

}

.play-button{

position:absolute;

inset:50% auto auto 50%;

width:64px;

height:64px;

display:grid;

place-items:center;

border-radius:50%;

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

color:var(--primary);

transform:translate(-50%,-50%);

box-shadow:0 12px 30px rgba(0,0,0,.18);

}

.newsletter-section{

background:#fff8f0;

}

/*====================================================
PUBLICATIONS
====================================================*/

.publication-feature{

background:#fffaf4;

}

.featured-book-cover{

max-height:520px;

object-fit:contain;

background:#fff;

padding:14px;

}

.publication-enquiry{

background:linear-gradient(135deg,#8E2D23,#C79A2C);

color:white;

}

.publication-enquiry .section-tag{

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

color:white;

border:1px solid rgba(255,255,255,.24);

}

.publication-enquiry-box{

display:flex;

align-items:center;

justify-content:space-between;

gap:28px;

}

.publication-enquiry-box h2{

color:white;

margin-bottom:10px;

}

.publication-enquiry-box p{

color:#fff6e8;

margin-bottom:0;

}

.publications-library{

background:#fff;

}

.publication-book{

background:white;

border:1px solid rgba(63,45,31,.1);

border-radius:8px;

box-shadow:0 14px 34px rgba(63,45,31,.1);

overflow:hidden;

display:flex;

flex-direction:column;

transition:var(--transition);

}

.publication-book:hover{

transform:translateY(-8px);

box-shadow:0 24px 52px rgba(63,45,31,.14);

}

.book-cover-wrap{

height:360px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(180deg,#fffaf4,#f1dfc9);

padding:18px;

flex-shrink:0;

}

.book-cover{

display:block;

max-height:100%;

height:auto;

width:auto;

max-width:100%;

object-fit:contain;

filter:drop-shadow(0 16px 20px rgba(63,45,31,.18));

}

.book-card-body{

padding:22px;

display:flex;

flex-direction:column;

align-items:flex-start;

gap:12px;

flex:1;

}

.book-card-body h4{

font-family:'Noto Serif Devanagari','Playfair Display',serif;

font-size:24px;

margin:0;

}

.book-card-body p{

font-size:14px;

line-height:1.6;

margin:0 0 auto;

}

.publication-price{

font-size:22px;

font-weight:800;

color:var(--primary);

margin-top:auto;

}

img.is-missing{

object-fit:cover;

filter:saturate(.9);

}

/*====================================================
EVENT TICKER
====================================================*/

.event-ticker{

background:linear-gradient(90deg,#E67E22,#F4A742);

color:#fff;

display:flex;

align-items:center;

overflow:hidden;

height:60px;

}

.ticker-label{

background:#503218;

padding:18px 35px;

font-weight:700;

font-size:18px;

white-space:nowrap;

z-index:5;

}

.ticker{

flex:1;

overflow:hidden;

position:relative;

min-width:0;

}

.ticker-track{

display:flex;

width:max-content;

animation:tickerMove 45s linear infinite;

will-change:transform;

}

.ticker-track span{

padding:0 60px;

font-size:17px;

font-weight:500;

white-space:nowrap;

}

.event-ticker:hover .ticker-track{

animation-play-state:paused;

}

/*====================================================
FEATURED EVENT
====================================================*/

.featured-event{

background:#FFFDF9;

position:relative;

overflow:hidden;

}

.featured-event::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:rgba(230,126,34,.05);

top:-180px;

right:-180px;

}

.featured-event::after{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:rgba(212,175,55,.05);

bottom:-120px;

left:-120px;

}

.event-image{

overflow:hidden;

border-radius:8px;

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

}

.event-image img{

transition:.7s;

}

.event-image:hover img{

transform:scale(1.06);

}

.featured-event h4{

font-size:28px;

color:var(--primary);

font-weight:700;

}

.featured-event p{

font-size:17px;

}

/*====================================================
EVENT CALENDAR
====================================================*/

.event-calendar-section{
background:#fffaf4;
}

.event-calendar-card{
background:white;
border:1px solid rgba(63,45,31,.1);
border-radius:8px;
box-shadow:0 24px 60px rgba(63,45,31,.12);
padding:28px;
}

.calendar-toolbar{
display:grid;
grid-template-columns:44px 1fr 44px minmax(210px,260px);
gap:14px;
align-items:center;
margin-bottom:18px;
}

.calendar-toolbar h3{
margin:0;
text-align:center;
font-family:var(--heading-font);
color:var(--primary);
font-size:34px;
}

.calendar-nav-btn{
width:44px;
height:44px;
border-radius:50%;
border:1px solid rgba(200,102,26,.22);
background:#fff3e8;
color:var(--primary);
display:inline-flex;
align-items:center;
justify-content:center;
transition:var(--transition);
}

.calendar-nav-btn:hover,
.calendar-nav-btn:focus{
background:var(--primary);
color:white;
}

.calendar-nav-btn:disabled{
opacity:.38;
cursor:not-allowed;
}

.calendar-month-select{
height:44px;
border-color:rgba(200,102,26,.25);
font-weight:600;
}

.calendar-legend{
display:flex;
justify-content:flex-end;
gap:18px;
font-weight:600;
font-size:14px;
color:#5a4636;
margin-bottom:14px;
}

.calendar-dot{
width:10px;
height:10px;
border-radius:50%;
display:inline-block;
margin-right:7px;
}

.vrat-dot{
background:#3f2d1f;
}

.event-dot{
background:#b7191f;
}

.calendar-weekdays,
.event-calendar-grid{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
}

.calendar-weekdays{
background:#8e2d23;
color:white;
border-radius:8px 8px 0 0;
overflow:hidden;
font-weight:700;
}

.calendar-weekdays div{
padding:12px 8px;
text-align:center;
}

.event-calendar-grid{
border-left:1px solid rgba(63,45,31,.1);
border-top:1px solid rgba(63,45,31,.1);
}

.calendar-day{
min-height:138px;
padding:10px;
border-right:1px solid rgba(63,45,31,.1);
border-bottom:1px solid rgba(63,45,31,.1);
background:#fffdf9;
position:relative;
}

.calendar-day.is-empty{
background:#f7efe4;
}

.calendar-day.is-today{
box-shadow:inset 0 0 0 2px rgba(200,102,26,.35);
}

.calendar-date-number{
font-weight:800;
font-size:20px;
color:#2f251f;
line-height:1;
margin-bottom:8px;
}

.calendar-items{
display:flex;
flex-direction:column;
gap:6px;
}

.calendar-item{
border:0;
border-radius:6px;
padding:7px 8px;
font-size:13px;
line-height:1.25;
text-align:left;
font-weight:700;
}

.calendar-item.vrat{
background:#f7efe4;
color:#2f251f;
}

.calendar-item.ashram-event{
background:#b7191f;
color:white;
cursor:pointer;
box-shadow:0 8px 16px rgba(183,25,31,.22);
}

.calendar-item.ashram-event:hover,
.calendar-item.ashram-event:focus{
background:#8e1116;
}

.event-detail-modal{
border:0;
border-radius:8px;
overflow:hidden;
}

.event-detail-modal .modal-header{
background:#fffaf4;
border-bottom:1px solid rgba(63,45,31,.08);
}

.event-detail-date,
.event-detail-location{
font-weight:700;
color:var(--primary);
margin-bottom:10px;
}

.event-detail-image{
width:100%;
border-radius:8px;
box-shadow:0 12px 28px rgba(63,45,31,.12);
margin-bottom:18px;
}

body.calendar-mobile-agenda .event-calendar-card{
padding:16px!important;
}

body.calendar-mobile-agenda .calendar-toolbar{
grid-template-columns:44px 1fr 44px!important;
}

body.calendar-mobile-agenda .calendar-toolbar h3{
font-size:26px!important;
}

body.calendar-mobile-agenda .calendar-month-select{
grid-column:1 / -1!important;
}

body.calendar-mobile-agenda .calendar-legend{
justify-content:flex-start!important;
flex-wrap:wrap!important;
}

body.calendar-mobile-agenda .calendar-weekdays{
display:none!important;
}

body.calendar-mobile-agenda .event-calendar-grid{
display:block!important;
border:0!important;
}

body.calendar-mobile-agenda .calendar-day{
display:grid!important;
grid-template-columns:46px minmax(0,1fr)!important;
gap:10px!important;
width:100%!important;
min-height:auto!important;
padding:10px!important;
border:1px solid rgba(63,45,31,.1)!important;
border-radius:8px!important;
margin-bottom:10px!important;
}

body.calendar-mobile-agenda .calendar-day.is-empty,
body.calendar-mobile-agenda .calendar-day:not(.has-items){
display:none!important;
}

body.calendar-mobile-agenda .calendar-date-number{
width:40px!important;
height:40px!important;
border-radius:50%!important;
background:#fff3e8!important;
color:var(--primary)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:18px!important;
line-height:1!important;
margin-bottom:0!important;
}

body.calendar-mobile-agenda .calendar-items{
min-width:0!important;
width:100%!important;
}

body.calendar-mobile-agenda .calendar-item{
width:100%!important;
max-width:100%!important;
white-space:normal!important;
word-break:normal!important;
overflow-wrap:anywhere!important;
font-size:13px!important;
line-height:1.35!important;
padding:8px 9px!important;
}

@media (max-width:575px){

.event-calendar-card{
padding:16px;
}

.calendar-toolbar{
grid-template-columns:44px 1fr 44px;
}

.calendar-toolbar h3{
font-size:26px;
}

.calendar-month-select{
grid-column:1 / -1;
}

.calendar-legend{
justify-content:flex-start;
flex-wrap:wrap;
}

.calendar-weekdays{
display:none;
}

.event-calendar-grid{
display:block;
border:0;
}

.calendar-day{
display:grid;
grid-template-columns:46px 1fr;
gap:10px;
min-height:auto;
padding:10px;
border:1px solid rgba(63,45,31,.1);
border-radius:8px;
margin-bottom:10px;
}

.calendar-day.is-empty,
.calendar-day:not(:has(.calendar-item)){
display:none;
}

.calendar-date-number{
width:40px;
height:40px;
border-radius:50%;
background:#fff3e8;
color:var(--primary);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
margin-bottom:0;
}

.calendar-items{
min-width:0;
}

.calendar-item{
width:100%;
font-size:13px!important;
line-height:1.35;
padding:8px 9px;
}

}

/*====================================================
ABOUT ASHRAM
====================================================*/

.about-section{

background:var(--secondary);

}

.about-section img{

border-radius:8px;

box-shadow:var(--shadow);

}

.about-section h5{

margin-bottom:18px;

font-size:18px;

color:var(--dark);

}

.about-section h5::before{

content:"🪔 ";

}

/*====================================================
GURU SECTION
====================================================*/

.guru-section{

position:relative;

}

.guru-section img{

border-radius:8px;

box-shadow:var(--shadow);

transition:.5s;

}

.guru-section img:hover{

transform:scale(1.03);

}

.guru-section p{

font-size:17px;

}

.guru-section .btn{

margin-top:20px;

}

/*====================================================
ACTIVITY SECTION
====================================================*/

.activities{

background:white;

position:relative;

}

.activities::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background-image:

radial-gradient(circle at 10% 20%,
rgba(230,126,34,.03),
transparent 35%),

radial-gradient(circle at 90% 80%,
rgba(212,175,55,.04),
transparent 30%);

pointer-events:none;

}

.activity-card{

background:white;

padding:45px 30px;

border-radius:8px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

text-align:center;

transition:.45s;

height:100%;

position:relative;

overflow:hidden;

}

.activity-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#E67E22,#D4AF37);

}

.activity-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.activity-card i{

font-size:58px;

margin-bottom:25px;

color:var(--primary);

transition:.4s;

}

.activity-card:hover i{

transform:rotate(8deg) scale(1.15);

color:var(--gold);

}

.activity-card h4{

margin-bottom:18px;

font-size:24px;

}

.activity-card p{

font-size:15px;

margin-bottom:0;

}

/*====================================================
SECTION DIVIDER
====================================================*/

.section-divider{

padding:20px 0;

background:var(--secondary);

}

.divider-img{

max-width:180px;

opacity:.85;

}

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

@keyframes tickerMove{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-100%);

}

}

@keyframes slideDown{

from{

transform:translateY(-100%);

}

to{

transform:translateY(0);

}

}

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translate(-50%,0);

}

40%{

transform:translate(-50%,-12px);

}

60%{

transform:translate(-50%,-6px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

100%{

transform:scale(1);

}

}

/*====================================================
COMMON UTILITIES
====================================================*/

.shadow-lg-custom{

box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.rounded-xl{

border-radius:24px;

}

.text-primary-theme{

color:var(--primary);

}

.bg-primary-light{

background:#FFF5EA;

}

.bg-gold-light{

background:#FFF8E3;

}

.mt-80{

margin-top:80px;

}

.mb-80{

margin-bottom:80px;

}

.py-100{

padding-top:100px;

padding-bottom:100px;

}

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

.statistics{

background:linear-gradient(180deg,#FFFDF9,#FFF5EA);

position:relative;

overflow:hidden;

}

.statistics::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:350px;

height:350px;

border-radius:50%;

background:rgba(230,126,34,.05);

}

.statistics::after{

content:"";

position:absolute;

bottom:-150px;

left:-150px;

width:400px;

height:400px;

border-radius:50%;

background:rgba(212,175,55,.05);

}

.stat-box{

background:white;

padding:45px 25px;

border-radius:8px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.stat-box:hover{

transform:translateY(-12px);

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

}

.stat-box i{

font-size:55px;

color:var(--primary);

margin-bottom:20px;

}

.stat-box h2{

font-size:54px;

color:var(--primary);

margin-bottom:10px;

font-weight:700;

}

.stat-box p{

font-size:16px;

font-weight:500;

margin-bottom:0;

}

/*====================================================
TIMELINE
====================================================*/

.timeline-section{

background:#FFFDF9;

position:relative;

}

.timeline{

position:relative;

max-width:1000px;

margin:auto;

padding-left:25px;

}

.timeline::before{

content:"";

position:absolute;

left:25px;

top:0;

width:4px;

height:100%;

background:linear-gradient(var(--primary),var(--gold));

border-radius:5px;

}

.timeline-item{

position:relative;

padding-left:70px;

margin-bottom:45px;

}

.timeline-item::before{

content:"";

position:absolute;

left:13px;

top:8px;

width:26px;

height:26px;

background:white;

border:5px solid var(--primary);

border-radius:50%;

z-index:10;

}

.timeline-box{

background:white;

padding:28px;

border-radius:8px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

}

.timeline-box:hover{

transform:translateX(8px);

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

}

.timeline-date{

display:inline-block;

background:#FFE9D2;

padding:8px 18px;

border-radius:40px;

font-size:14px;

font-weight:600;

color:var(--primary);

margin-bottom:15px;

}

.timeline-box h5{

margin-bottom:10px;

font-size:22px;

}

.timeline-box p{

margin-bottom:0;

}

/*====================================================
EVENT CARDS
====================================================*/

.events{

background:white;

}

.event-card{

background:white;

border-radius:8px;

padding:35px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.4s;

height:100%;

position:relative;

overflow:hidden;

}

.event-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--primary),var(--gold));

}

.event-card:hover{

transform:translateY(-10px);

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

}

.event-date{

width:85px;

height:85px;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),var(--gold));

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:700;

font-size:20px;

margin-bottom:25px;

}

.event-card h4{

margin-bottom:15px;

}

.event-card.featured{

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

}

.event-card .badge{

position:absolute;

top:18px;

right:18px;

font-size:13px;

padding:8px 14px;

}

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

.gallery{

background:#FFFDF9;

}

.gallery a{

display:block;

overflow:hidden;

border-radius:8px;

position:relative;

}

.gallery img{

width:100%;

height:280px;

object-fit:cover;

transition:.6s;

}

.gallery a::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

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

opacity:0;

transition:.4s;

z-index:2;

}

.gallery a::after{

content:"🔍";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

font-size:34px;

color:white;

opacity:0;

z-index:3;

transition:.4s;

}

.gallery a:hover::before,

.gallery a:hover::after{

opacity:1;

}

.gallery a:hover img{

transform:scale(1.12);

}

/*====================================================
VIDEO CARDS
====================================================*/

.videos{

background:white;

}

.video-card{

background:#fff;

border-radius:8px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.4s;

text-align:center;

height:100%;

}

.video-card:hover{

transform:translateY(-10px);

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

}

.video-card img{

height:240px;

width:100%;

object-fit:cover;

transition:.5s;

}

.video-embed{

position:relative;

width:100%;

aspect-ratio:16/9;

overflow:hidden;

background:#111;

border-radius:8px 8px 0 0;

}

.video-embed iframe{

position:absolute;

inset:0;

width:100%;

height:100%;

border:0;

display:block;

}

.latest-video .video-embed{

border-radius:8px;

margin-bottom:16px;

}

.video-card:hover img{

transform:scale(1.08);

}

.video-card h5{

padding:20px 20px 0;

font-size:22px;

}

.video-card .btn{

margin:20px 0 30px;

}

/*====================================================
IMAGE OVERLAYS
====================================================*/

.image-overlay{

position:relative;

overflow:hidden;

border-radius:8px;

}

.image-overlay img{

transition:.6s;

}

.image-overlay:hover img{

transform:scale(1.08);

}

.image-overlay::before{

content:"";

position:absolute;

width:100%;

height:100%;

background:linear-gradient(

transparent,

rgba(0,0,0,.55)

);

opacity:0;

transition:.4s;

z-index:1;

}

.image-overlay:hover::before{

opacity:1;

}

/*====================================================
COUNTER ANIMATION PLACEHOLDER
====================================================*/

.counter{

display:inline-block;

font-variant-numeric:tabular-nums;

}

/*====================================================
HOVER EFFECTS
====================================================*/

.scale-hover{

transition:.35s;

}

.scale-hover:hover{

transform:scale(1.05);

}

.rotate-hover{

transition:.4s;

}

.rotate-hover:hover{

transform:rotate(-2deg);

}

/*====================================================
SOCIAL MEDIA WALL
====================================================*/

.social-wall{

background:#FFFDF8;

position:relative;

overflow:hidden;

}

.social-wall::before{

content:"";

position:absolute;

top:-150px;

left:-150px;

width:350px;

height:350px;

background:rgba(230,126,34,.05);

border-radius:50%;

}

.social-card{

background:white;

padding:45px 30px;

border-radius:8px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

text-align:center;

transition:.45s;

height:100%;

}

.social-card:hover{

transform:translateY(-10px);

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

}

.social-card i{

font-size:60px;

margin-bottom:20px;

transition:.4s;

}

.social-card.youtube i{

color:#FF0000;

}

.social-card.facebook i{

color:#1877F2;

}

.social-card.instagram i{

color:#E1306C;

}

.social-card.telegram i{

color:#229ED9;

}

.social-card.whatsapp i,
.social-card.whatsapp h4,
.social-card.whatsapp h5{

color:#25D366;

}

.social-card:hover i{

transform:scale(1.15);

}

/*====================================================
QUOTE
====================================================*/

.quote-section{

background:

linear-gradient(

135deg,

#8E2D23,

#466B4D

);

color:white;

}

.quote-box{

max-width:900px;

margin:auto;

}

.quote-box h3{

color:white;

font-size:38px;

line-height:1.6;

font-style:italic;

}

.quote-box p{

color:white;

font-size:20px;

margin-top:25px;

}

/*====================================================
DONATION
====================================================*/

.donation{

background:

linear-gradient(

135deg,

#8E2D23,

#C79A2C

);

color:white;

}

.donation h2{

color:white;

font-size:42px;

margin-bottom:20px;

}

.donation p{

color:#fff;

font-size:18px;

}

.donation .btn{

background:white;

color:#8E2D23;

font-weight:700;

}

.donation .btn:hover{

transform:translateY(-5px);

}

/*====================================================
VISIT SECTION
====================================================*/

.visit{

background:#FFF8F1;

}

.visit iframe{

border:none;

border-radius:8px;

box-shadow:0 15px 40px rgba(0,0,0,.1);

}

.visit p{

font-size:17px;

}

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

footer{

background:#3A2616;

color:#DDD;

padding-top:90px;

padding-bottom:40px;

}

footer h3,

footer h5{

color:white;

margin-bottom:25px;

}

footer p{

color:#D6D6D6;

}

footer ul li{

margin-bottom:12px;

}

footer ul li a{

color:#D6D6D6;

transition:.3s;

}

footer ul li a:hover{

color:#FFD56A;

padding-left:8px;

}

footer hr{

border-color:rgba(255,255,255,.15);

margin:45px 0;

}

.social-icons{

margin-top:25px;

}

.social-icons a{

display:inline-flex;

width:46px;

height:46px;

align-items:center;

justify-content:center;

border-radius:50%;

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

margin-right:10px;

color:white;

font-size:18px;

transition:.35s;

}

.social-icons a:hover{

background:var(--primary);

transform:translateY(-5px);

}

/*====================================================
BACK TO TOP
====================================================*/

#backToTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:20px;

display:none;

cursor:pointer;

z-index:9999;

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

transition:.35s;

}

#backToTop:hover{

transform:translateY(-6px);

background:var(--gold);

}

/*====================================================
CUSTOM SCROLLBAR
====================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#FFF8F2;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

var(--primary),

var(--gold)

);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}

/*====================================================
FLOATING DECORATION
====================================================*/

.float{

animation:floating 5s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*====================================================
FADE IN
====================================================*/

.fade-up{

opacity:0;

transform:translateY(50px);

transition:1s;

}

.fade-up.active{

opacity:1;

transform:translateY(0);

}

/*====================================================
CARD GLASS EFFECT
====================================================*/

.glass{

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

backdrop-filter:blur(15px);

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

}

/*====================================================
IMAGE SHADOW
====================================================*/

.shadow-soft{

box-shadow:

0 20px 60px rgba(0,0,0,.08);

}

/*====================================================
TEXT COLORS
====================================================*/

.text-gold{

color:#D4AF37;

}

.text-orange{

color:#E67E22;

}

/*====================================================
SPACING HELPERS
====================================================*/

.py-120{

padding-top:120px;

padding-bottom:120px;

}

.mt-100{

margin-top:100px;

}

.mb-100{

margin-bottom:100px;

}

/*====================================================
END
====================================================*/