/* ===========================================
   Bundeli Innovations
   Responsive Stylesheet
=========================================== */

/* ===============================
   Laptop
================================ */

@media (max-width:1200px){

.container{
width:92%;
}

.hero h1{
font-size:54px;
}

}

/* ===============================
   Tablet
================================ */

@media (max-width:992px){

header{
padding:10px 0;
}

nav{
flex-direction:column;
gap:20px;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.hero{

padding:150px 0 80px;

}

.hero-grid,
.about-grid,
.founder-grid,
.innovation-layout,
.contact-grid{

grid-template-columns:1fr;

}

.hero-content{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-image{

max-width:500px;
margin:auto;

}

.research-grid,
.stats-grid,
.timeline-grid,
.future-grid,
.process-grid,
.social-grid{

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

}

.gallery-grid{

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

}

.footer-grid{

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

}

}

/* ===============================
   Mobile
================================ */

@media (max-width:768px){

.container{

width:94%;

}

.hero{

padding:130px 0 70px;

}

.hero h1{

font-size:40px;

}

.hero p{

font-size:16px;

}

.section-title h2{

font-size:32px;

}

.about-content h3,
.innovation-info h2,
.contact-info h2{

font-size:32px;

}

.hero-buttons{

flex-direction:column;
gap:15px;

}

.btn,
.btn-outline{

width:100%;
text-align:center;

}

.btn-outline{

margin-left:0;

}

.about-features{

grid-template-columns:1fr;

}

.research-grid,
.gallery-grid,
.stats-grid,
.timeline-grid,
.future-grid,
.process-grid,
.social-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;
text-align:center;

}

.social-icons{

justify-content:center;

}

.contact-item{

align-items:flex-start;

}

.contact-form{

padding:25px;

}

iframe{

height:300px;

}

}

/* ===============================
   Small Mobile
================================ */

@media (max-width:480px){

.logo span{

font-size:18px;

}

.logo img{

width:42px;

}

nav ul{

gap:12px;

}

nav ul li a{

font-size:14px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:15px;

}

.section-title h2{

font-size:28px;

}

.about-content h3{

font-size:28px;

}

.innovation-info h2{

font-size:28px;

}

.contact-info h2{

font-size:28px;

}

.stat-box h2{

font-size:34px;

}

.btn,
.btn-outline{

padding:14px 20px;

}

.gallery-item img{

height:220px;

}

.footer-logo{

width:60px;

}

.footer-grid{

gap:30px;

}

}

/* ===============================
   Very Small Devices
================================ */

@media (max-width:360px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:14px;

}

.section-title h2{

font-size:24px;

}

.container{

width:95%;

}

nav ul{

flex-direction:column;

}

}

/* ===========================================
   End Responsive File
=========================================== */