/*==================================================
            CHAUHAN SOLAR SYSTEM
            RESPONSIVE CSS
            PART - 1
==================================================*/


/*=========================================
Large Desktop
1400px
=========================================*/

@media (max-width:1400px){

.container{

width:92%;

}

.hero-content h1{

font-size:56px;

}

.hero-content h2{

font-size:26px;

}

.section-title h2{

font-size:38px;

}

}




/*=========================================
Laptop
1200px
=========================================*/

@media (max-width:1200px){

.container{

width:94%;

}

.hero .container{

gap:40px;

}

.hero-content h1{

font-size:50px;

}

.hero-content h2{

font-size:24px;

}

.hero-image img{

max-width:480px;

}

.about .container,

.pm-surya-section .container{

gap:50px;

}

.service-grid{

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

gap:22px;

}

.why-grid{

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

}

.footer-grid{

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

gap:35px;

}

.highlight-box h3{

font-size:28px;

}

}




/*=========================================
Small Laptop
992px
=========================================*/

@media (max-width:992px){

section{

padding:80px 0;

}


/*------------ Hero ------------*/

.hero{

padding-top:140px;

}

.hero .container{

grid-template-columns:1fr;

text-align:center;

}

.hero-content{

order:2;

}

.hero-image{

order:1;

}

.hero-image img{

max-width:420px;

}

.hero-content p{

margin:auto auto 30px;

}

.hero-buttons{

justify-content:center;

}


/*------------ About ------------*/

.about .container{

grid-template-columns:1fr;

}

.about-image{

margin-bottom:30px;

}

.about-content{

text-align:center;

}

.about-list{

grid-template-columns:1fr 1fr;

}


/*------------ PM Surya ------------*/

.pm-surya-section .container{

grid-template-columns:1fr;

}

.pm-left{

text-align:center;

}

.pm-right{

text-align:center;

}

.pm-right ul{

display:inline-block;

text-align:left;

}


/*------------ Services ------------*/

.service-grid{

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

}


/*------------ Why Choose ------------*/

.why-grid{

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

}


/*------------ Strength ------------*/

.strength-grid{

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

}


/*------------ Gallery ------------*/

.gallery-grid{

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

}


/*------------ Footer ------------*/

.footer-grid{

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

}


/*------------ Top Bar ------------*/

.top-bar .container{

justify-content:center;

text-align:center;

gap:12px;

}

}


/*==================================================
END PART 1
==================================================*/
/*==================================================
            RESPONSIVE CSS
            PART - 2
            TABLET (768px)
==================================================*/

@media (max-width:768px){

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

section{

padding:70px 0;

}

.container{

width:95%;

}


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

.top-bar{

display:none;

}


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

.navbar{

padding:15px 0;

}

.logo img{

width:55px;

height:55px;

}

.logo h2{

font-size:22px;

}

.logo span{

font-size:14px;

}


/*============================
MOBILE MENU BUTTON
============================*/

.menu-btn{

display:block;

font-size:30px;

color:var(--primary);

cursor:pointer;

}


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

.nav-menu{

position:fixed;

top:85px;

left:-100%;

width:280px;

height:calc(100vh - 85px);

background:#fff;

display:flex;

flex-direction:column;

align-items:flex-start;

padding:35px 25px;

gap:25px;

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

transition:.4s;

overflow-y:auto;

}

.nav-menu.active{

left:0;

}

.nav-menu li{

width:100%;

}

.nav-menu a{

display:block;

width:100%;

padding:12px 0;

border-bottom:1px solid #eee;

}


/*============================
LANGUAGE BUTTON
============================*/

.language{

display:none;

}


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

.hero{

min-height:auto;

padding:120px 0 80px;

text-align:center;

}

.hero-content h1{

font-size:42px;

}

.hero-content h2{

font-size:22px;

}

.hero-content p{

font-size:16px;

}

.hero-buttons{

justify-content:center;

gap:15px;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-success,

.hero-buttons .btn-outline{

width:100%;

max-width:280px;

}


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

.about-content h2{

font-size:34px;

}

.about-list{

grid-template-columns:1fr;

text-align:left;

}


/*============================
SERVICES
============================*/

.service-grid{

grid-template-columns:1fr;

}

.service-card{

padding:35px 25px;

}


/*============================
PM SURYA GHAR
============================*/

.pm-right h2{

font-size:34px;

}


/*============================
WHY CHOOSE US
============================*/

.why-grid{

grid-template-columns:1fr;

}


/*============================
COMPANY STRENGTH
============================*/

.strength-grid{

grid-template-columns:1fr;

}


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

.gallery-grid{

grid-template-columns:1fr;

}


/*============================
CONTACT
============================*/

.contact-info h2{

font-size:34px;

}

.contact-item{

flex-direction:column;

gap:8px;

}


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

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:35px;

}


/*============================
FLOATING BUTTON
============================*/

.call-btn,

.whatsapp-btn{

width:55px;

height:55px;

font-size:22px;

right:18px;

}

.call-btn{

bottom:90px;

}

.whatsapp-btn{

bottom:18px;

}

}

/*==================================================
END PART 2
==================================================*/
/*==================================================
            RESPONSIVE CSS
            PART - 3
            MOBILE (576px)
==================================================*/

@media (max-width:576px){

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

.container{

width:94%;

}

section{

padding:60px 0;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:28px;

line-height:1.3;

}

.section-title span{

font-size:15px;

}

.section-title p{

font-size:15px;

}


/*============================
LOGO
============================*/

.logo{

gap:10px;

}

.logo img{

width:48px;

height:48px;

}

.logo h2{

font-size:19px;

}

.logo span{

font-size:13px;

}


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

.hero{

padding:100px 0 60px;

}

.hero-content h1{

font-size:34px;

line-height:1.2;

}

.hero-content h2{

font-size:18px;

line-height:1.5;

}

.hero-content p{

font-size:15px;

line-height:1.8;

}

.hero-tag{

font-size:13px;

padding:8px 18px;

}

.hero-image img{

max-width:300px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-success,

.hero-buttons .btn-outline{

width:100%;

max-width:100%;

}


/*============================
HIGHLIGHTS
============================*/

.highlights{

margin-top:0;

}

.highlights .container{

grid-template-columns:1fr;

}

.highlight-box{

padding:30px 20px;

}


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

.about-content{

text-align:left;

}

.about-content h2{

font-size:28px;

}

.about-list{

grid-template-columns:1fr;

gap:15px;

}


/*============================
SERVICES
============================*/

.service-grid{

grid-template-columns:1fr;

}

.service-card{

padding:30px 20px;

}

.service-card i{

font-size:48px;

}

.service-card h3{

font-size:22px;

}


/*============================
PM SURYA
============================*/

.pm-right{

text-align:left;

}

.pm-right h2{

font-size:28px;

}

.pm-right ul li{

font-size:15px;

}


/*============================
WHY CHOOSE
============================*/

.why-card{

padding:30px 20px;

}

.why-card h3{

font-size:20px;

}


/*============================
COMPANY STRENGTH
============================*/

.strength-card{

padding:30px 20px;

}

.strength-card h3{

font-size:34px;

}


/*============================
FREE VISIT
============================*/

.free-visit h2{

font-size:30px;

}

.free-visit p{

font-size:16px;

}

.visit-btn{

flex-direction:column;

align-items:center;

}

.visit-btn a{

width:100%;

max-width:300px;

}


/*============================
CONTACT
============================*/

.contact-info h2{

font-size:30px;

}

.contact-item{

font-size:16px;

word-break:break-word;

}


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

footer{

padding:60px 0 25px;

}

.footer-grid{

gap:30px;

}

.footer-grid h3{

font-size:22px;

}

.footer-grid p,

.footer-grid li{

font-size:15px;

}


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

.call-btn,

.whatsapp-btn{

width:50px;

height:50px;

font-size:20px;

right:15px;

}

.call-btn{

bottom:80px;

}

.whatsapp-btn{

bottom:15px;

}

}

/*==================================================
END PART 3
==================================================*/
/*==================================================
        RESPONSIVE CSS
        PART - 4 (FINAL)
==================================================*/


/*=========================================
480px
=========================================*/

@media (max-width:480px){

.container{

width:95%;

}

.logo img{

width:42px;

height:42px;

}

.logo h2{

font-size:17px;

}

.hero{

padding-top:90px;

}

.hero-content h1{

font-size:30px;

line-height:1.2;

}

.hero-content h2{

font-size:17px;

}

.hero-content p{

font-size:14px;

}

.section-title h2{

font-size:25px;

}

.section-title p{

font-size:14px;

}

.btn-primary,
.btn-success,
.btn-outline{

width:100%;

padding:14px 20px;

font-size:15px;

}

.highlight-box{

padding:25px 15px;

}

.highlight-box h3{

font-size:28px;

}

.about-content h2{

font-size:26px;

}

.service-card{

padding:25px 18px;

}

.service-card h3{

font-size:20px;

}

.pm-right h2{

font-size:26px;

}

.why-card{

padding:25px 18px;

}

.strength-card{

padding:25px 18px;

}

.contact-info h2{

font-size:28px;

}

.footer-grid{

gap:25px;

}

.footer-grid h3{

font-size:20px;

}

.footer-grid p,
.footer-grid li{

font-size:14px;

}

.call-btn,
.whatsapp-btn{

width:48px;

height:48px;

font-size:18px;

}

}


/*=========================================
360px
=========================================*/

@media (max-width:360px){

.hero-content h1{

font-size:26px;

}

.hero-content h2{

font-size:16px;

}

.hero-tag{

font-size:12px;

padding:7px 14px;

}

.logo{

gap:8px;

}

.logo img{

width:38px;

height:38px;

}

.logo h2{

font-size:15px;

}

.logo span{

font-size:11px;

}

.menu-btn{

font-size:26px;

}

.section-title h2{

font-size:22px;

}

.about-content h2,

.pm-right h2,

.contact-info h2,

.free-visit h2{

font-size:24px;

}

.btn-primary,
.btn-success,
.btn-outline{

font-size:14px;

padding:12px 16px;

}

.contact-item{

font-size:14px;

}

.footer{

text-align:center;

}

}


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

@media (max-height:500px) and (orientation:landscape){

.hero{

min-height:auto;

padding:120px 0 70px;

}

.nav-menu{

height:calc(100vh - 70px);

overflow-y:auto;

}

}


/*=========================================
IMAGE OPTIMIZATION
=========================================*/

img{

max-width:100%;

height:auto;

display:block;

}


/*=========================================
TABLE OVERFLOW
=========================================*/

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}


/*=========================================
IFRAME
=========================================*/

iframe{

max-width:100%;

border:0;

}


/*=========================================
INPUT RESPONSIVE
=========================================*/

input,
select,
textarea,
button{

width:100%;

max-width:100%;

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

}


/*=========================================
TEXT BREAK
=========================================*/

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

word-wrap:break-word;

overflow-wrap:break-word;

}


/*=========================================
END OF RESPONSIVE.CSS
=========================================*/