/*=========================================
            RESPONSIVE.CSS
        Solaris Infratech
=========================================*/

/* Reset Images */

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

/* Prevent Horizontal Scroll */

html,body{
    overflow-x:hidden;
}

/* Sections */

section{
    width:100%;
}

/*=========================================
LARGE LAPTOP
=========================================*/

@media(max-width:1400px){

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

.hero-content h2{
    font-size:32px;
}

}

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

@media(max-width:992px){

.navbar{

padding:15px 25px;

}

.logo{

height:75px;

}

.menu{

gap:18px;
flex-wrap:wrap;
justify-content:center;

}

.hero{

padding:120px 40px;

}

.hero-content h1{

font-size:48px;

}

.hero-content h2{

font-size:28px;

}

.hero-content p{

font-size:18px;

}

.buttons{

flex-wrap:wrap;
justify-content:center;

}

.stats{

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

gap:25px;

}

.service-grid,
.product-grid,
.project-grid,
.gallery-grid,
.solution-grid{

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

}

.contact-section{

grid-template-columns:1fr;

}

.about-section{

grid-template-columns:1fr;

}

.about-image{

margin-bottom:40px;

}

.video-grid{

grid-template-columns:1fr;

}

}

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

@media(max-width:768px){

/* NAVBAR */

.navbar{

flex-direction:column;

padding:15px;

}

.logo-area{

justify-content:center;

margin-bottom:15px;

}

.logo{

height:65px;

}

.menu{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:10px;

}

.menu li{

list-style:none;

}

.menu a{

font-size:14px;

padding:8px 10px;

}

/* HERO */

.hero,
.calc-hero,
.catalogue-hero,
.project-hero,
.gallery-hero,
.contact-hero,
.solution-hero{

height:auto;

padding:120px 20px 70px;

}

.hero-content{

width:100%;

text-align:center;

}

.hero-content h1{

font-size:38px;

line-height:1.2;

}

.hero-content h2{

font-size:24px;

}

.hero-content h4{

font-size:15px;

}

.hero-content p{

font-size:16px;

}

.buttons,
.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}

/* CARDS */

.service-grid,
.product-grid,
.project-grid,
.gallery-grid,
.solution-grid,
.why-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.card,
.product-card,
.project-card,
.gallery-item,
.service-card{

width:100%;

}

/* ABOUT */

.about-section{

display:flex;

flex-direction:column;

}

.about-image{

order:1;

}

.about-content{

order:2;

}

/* CONTACT */

.contact-section{

display:flex;

flex-direction:column;

}

.contact-form,
.contact-info{

width:100%;

}

/* CALCULATOR */

.glass-card{

width:100%;

padding:25px;

}

.glass-card input,
.glass-card select,
.glass-card button{

font-size:16px;

}

.solar-report table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

/* STATS */

.stats,
.project-stats{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.stat-box{

padding:20px;

}

/* FOOTER */

footer{

padding:35px 20px;

text-align:center;

}

.footer-content{

display:flex;

flex-direction:column;

align-items:center;

}

/* MAP */

iframe{

width:100%;

height:300px;

}

/* BROCHURE */

.catalogue-gallery{

display:flex;

flex-direction:column;

gap:25px;

}

/* VIDEO */

.video-grid{

display:grid;

grid-template-columns:1fr;

}

/* WHATSAPP */

.whatsapp{

width:60px;

height:60px;

font-size:28px;

bottom:20px;

right:20px;

}

}

/*=========================================
SMALL PHONES
=========================================*/

@media(max-width:480px){

.hero-content h1{

font-size:30px;

}

.hero-content h2{

font-size:20px;

}

.hero-content p{

font-size:14px;

}

.calc-hero h1,
.project-hero h1,
.catalogue-hero h1,
.gallery-hero h1,
.contact-hero h1,
.solution-hero h1{

font-size:32px;

}

.title h2{

font-size:28px;

}

.stats,
.project-stats{

grid-template-columns:1fr;

}

.menu{

gap:5px;

}

.menu a{

font-size:13px;

padding:6px;

}

.btn-primary,
.btn-secondary{

padding:14px;

font-size:15px;

}

.glass-card{

padding:20px;

}

}

/*=========================================
EXTRA LARGE
=========================================*/

@media(min-width:1600px){

.container{

max-width:1500px;

margin:auto;

}

}