/* ===========================================
TABLET
=========================================== */

@media (max-width:991px){

nav{
padding:15px 5%;
flex-wrap:wrap;
}

.logo img{
height:65px;
}

nav ul{
gap:18px;
flex-wrap:wrap;
justify-content:center;
margin-top:10px;
}

.content h1,
.about-hero h1,
.hero-overlay h1,
.temple-content h1,
.festival-content h1{
font-size:55px;
line-height:1.2;
}

.content p,
.about-overlay p,
.hero-overlay p,
.temple-content p,
.festival-content p{
font-size:20px;
}

.about,
.temple-section,
.festival-section,
.travel-section,
.why-section,
.food-section,
.gallery-section,
.events-section,
.map-section,
.footer,
.history,
.importance,
.timeline-section,
.location-section,
.temple-intro,
.history-section,
.timing-section,
.schedule-section,
.pooja-section,
.architecture-section,
.significance-section,
.festival-intro,
.annual-festivals,
.festival-calendar,
.special-poojas,
.rules-section,
.faq-section,
.shrines-section,
.temple-map-section,
.cta-section{
padding:80px 5%;
}

.history,
.intro-container,
.location-container,
.architecture-container,
.festival-intro,
.map-card{
grid-template-columns:1fr;
}

.gallery{
column-count:2;
}

.gallery-grid{
grid-template-columns:repeat(2,1fr);
}

.counter-section{
grid-template-columns:repeat(2,1fr);
}

.temple-content h1{
font-size:60px;
}

.schedule::before,
.calendar-timeline::before,
.timeline::after{
left:25px;
}

.schedule-item,
.calendar-item,
.timeline-item{
width:100%;
left:0 !important;
padding-left:70px;
padding-right:20px;
text-align:left;
}

.schedule-item .dot,
.calendar-item::after,
.timeline-item::after{
left:14px;
right:auto;
}

}


/* ===========================================
MOBILE
=========================================== */

@media (max-width:768px){

body{
overflow-x:hidden;
}

nav{
position:relative;
padding:15px 20px;
flex-direction:column;
}

.logo img{
height:55px;
margin-bottom:15px;
}

nav ul{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}

nav ul li{
margin:0;
}

nav ul li a{
font-size:15px;
}

.hero,
.temple-hero,
.gallery-hero,
.festival-hero,
.about-hero{
height:75vh;
}

.content h1,
.about-overlay h1,
.hero-overlay h1,
.temple-content h1,
.festival-content h1{
font-size:38px;
line-height:1.2;
}

.content p,
.about-overlay p,
.hero-overlay p,
.temple-content p,
.festival-content p{
font-size:17px;
line-height:30px;
}

.buttons,
.cta-buttons{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

.btn1,
.btn2,
.hero-btn,
.cta-btn1,
.cta-btn2{
width:90%;
text-align:center;
margin:0;
}

h2,
.about h2,
.food-section h2,
.events-section h2,
.map-section h2,
.temple-section h2,
.festival-section h2,
.travel-section h2,
.why-section h2,
.history h2,
.importance h2,
.location-heading h2,
.temple-intro h2,
.history-section h2,
.timing-section h2,
.schedule-section h2,
.pooja-section h2,
.architecture-content h2,
.significance-section h2,
.section-title h2,
.calendar-heading h2,
.rules-section h2,
.faq-section h2,
.shrines-section h2,
.map-heading h2{
font-size:34px;
line-height:1.3;
}

.temple-grid,
.festival-grid,
.travel-grid,
.why-grid,
.food-grid,
.events-grid,
.stay-grid,
.importance-grid,
.info-grid,
.pooja-grid,
.gallery-grid,
.shrines-grid,
.festival-highlight-grid,
.counter-grid,
.rules-grid,
.attractions-grid{
grid-template-columns:1fr;
}

.gallery{
column-count:1;
}

.counter-section{
grid-template-columns:1fr;
}

.card,
.travel-card,
.food-card,
.event-card,
.why-card,
.counter-card,
.gallery-card,
.rule-card,
.pooja-card,
.timing-card,
.stay-card,
.importance-card{
padding:25px;
}

.map-container iframe,
.google-map iframe,
.map-box iframe{
height:300px;
}

.footer-container{
grid-template-columns:1fr;
text-align:center;
}

.social-icons{
justify-content:center;
}

.footer-logo{
margin:auto;
display:block;
margin-bottom:20px;
}

img{
max-width:100%;
height:auto;
}

.history img,
.intro-image img,
.architecture-image img{
width:100%;
}

}


/* ===========================================
SMALL MOBILE
=========================================== */

@media (max-width:480px){

.content h1,
.about-overlay h1,
.hero-overlay h1,
.temple-content h1,
.festival-content h1{
font-size:30px;
}

.content p,
.about-overlay p,
.hero-overlay p,
.temple-content p,
.festival-content p{
font-size:15px;
line-height:26px;
}

.btn1,
.btn2,
.hero-btn,
.cta-btn1,
.cta-btn2{
padding:15px 20px;
font-size:15px;
}

nav ul{
gap:10px;
}

nav ul a{
font-size:14px;
}
@media(max-width:768px){

.menu-toggle{
display:block;
}

.nav-links{

position:absolute;
top:70px;
left:0;

width:100%;

background:#111;

display:flex;
flex-direction:column;

max-height:0;

overflow:hidden;

transition:.4s;

}

.nav-links.active{

max-height:500px;

}

.nav-links li{

text-align:center;
padding:18px 0;

}

}
}