/*=========================================================
 SHRI SHIVAYOGI AJJANAVAR INSTITUTION
 RESPONSIVE DESIGN
=========================================================*/


/*=========================================================
 LARGE TABLETS / SMALL LAPTOPS
=========================================================*/


@media(max-width:1200px){


.container{

width:92%;

}


/* Navigation */

.nav-menu{

gap:20px;

}


.site-name{

font-size:18px;

}



.program-grid{

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

}



.stats-grid{

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

}



.footer-grid{

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

}



.gallery-preview{

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

}



}






/*=========================================================
 TABLETS
=========================================================*/


@media(max-width:992px){


.section{

padding:70px 0;

}


/* HEADER */


.navbar{

height:85px;

}



.logo{

height:60px;

width:60px;

}



.site-name{

font-size:17px;

max-width:350px;

}



/* MOBILE MENU */


.menu-btn{

display:block;

}



.nav-menu{

position:absolute;

top:85px;

left:0;

width:100%;

background:white;

display:flex;

flex-direction:column;

align-items:center;

padding:30px 0;

gap:25px;

transform:translateY(-120%);

transition:.4s;

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

}



.nav-menu.active{

transform:translateY(0);

}



.donate-btn{

display:inline-block;

}





/* HERO */


.hero{

height:90vh;

}



.hero h1{

font-size:38px;

}



.hero h2{

font-size:22px;

}



.hero p{

font-size:16px;

}



/* ABOUT */


.about-grid{

grid-template-columns:1fr;

gap:40px;

}



.about-content{

text-align:center;

}



.about-content h2{

font-size:34px;

}



/* VISION */


.vm-grid{

grid-template-columns:1fr;

}





/* PROGRAM */


.program-grid{

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

}



/* CONTACT */


.contact-grid{

grid-template-columns:1fr;

}




/* TIMELINE */


.timeline::before{

left:20px;

}



.timeline-item{

display:block;

padding-left:50px;

}



.timeline-content{

width:100%;

}




/* PAGE BANNER */


.page-banner h1{

font-size:38px;

}





}




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


@media(max-width:768px){



.container{

width:94%;

}



/* HEADER */


.logo{

height:55px;

width:55px;

}



.site-name{

font-size:15px;

line-height:1.4;

}




/* HERO */


.hero-content{

padding-top:100px;

}



.hero h1{

font-size:30px;

}



.hero h2{

font-size:20px;

}



.hero p{

font-size:15px;

}



.btn{

padding:12px 25px;

font-size:14px;

}



.btn-outline{

margin-left:0;

margin-top:15px;

}




/* TITLES */


.section-title{

font-size:32px;

}



.section-subtitle{

font-size:15px;

}




/* PROGRAMS */


.program-grid{

grid-template-columns:1fr;

}



.program-card img{

height:220px;

}



/* STATS */


.stats-grid{

grid-template-columns:1fr;

}



.stat-box h2{

font-size:38px;

}




/* GALLERY */


.gallery-preview{

grid-template-columns:1fr;

}



.gallery-preview img{

height:240px;

}



.gallery-grid{

grid-template-columns:1fr;

}



.gallery-item img{

height:250px;

}





/* FOOTER */


.footer-grid{

grid-template-columns:1fr;

text-align:center;

}



.social-icons{

justify-content:center;

}




/* CTA */


.cta-section h2{

font-size:30px;

}



/* CONTACT */


.contact-box{

padding:25px;

}



.page-banner{

height:45vh;

}



.page-banner h1{

font-size:30px;

}




/* FLOAT BUTTONS */


.back-top,
.whatsapp{

height:45px;

width:45px;

font-size:18px;

}



.back-top{

right:15px;

}



.whatsapp{

left:15px;

}



}






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


@media(max-width:480px){



.logo-area{

gap:8px;

}



.site-name{

font-size:13px;

}



.hero h1{

font-size:26px;

}



.hero h2{

font-size:18px;

}



.section{

padding:55px 0;

}



.vm-card{

padding:25px;

}



.program-content{

padding:20px;

}



.testimonial-box{

padding:25px;

}



.contact-item{

gap:10px;

}



}