/*==================================================
        RESPONSIVE.CSS
        PART - 1
===================================================*/


/*=========================
1400px
=========================*/

@media(max-width:1400px){

.container{

max-width:1200px;

}

.hero h1{

font-size:56px;

}

}



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

@media(max-width:1200px){

.container{

max-width:1000px;

padding:0 25px;

}

.hero{

padding-top:170px;

}

.hero .container{

gap:40px;

}

.hero h1{

font-size:48px;

}

.hero p{

font-size:17px;

}

.nav-menu{

gap:22px;

}

.logo span{

font-size:20px;

}

.stats{

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

gap:25px;

}

.services-grid{

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

}

.pricing-grid{

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

}

.portfolio-grid{

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

}

}



/*=========================
992px
=========================*/

@media(max-width:992px){

.header{

padding:15px 0;

}

.nav-menu{

display:none;

}

.nav-right{

display:none;

}

.menu-toggle{

display:block;

}

.hero{

padding-top:150px;

}

.hero .container{

flex-direction:column;

text-align:center;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

margin-bottom:40px;

}

.hero-buttons{

justify-content:center;

}

.trust-section{

justify-content:center;

}

.hero-card{

display:none;

}

.services-grid{

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

}

.pricing-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

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

}

.why-grid{

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

}

.testimonial-grid{

grid-template-columns:1fr;

}

.contact-wrapper{

flex-direction:column;

}

.footer-grid{

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

}

}
/*==================================================
        RESPONSIVE.CSS
        PART - 2
===================================================*/


/*=========================
768px
=========================*/

@media(max-width:768px){

section{

padding:70px 0;

}

.container{

padding:0 18px;

}

.hero{

padding-top:130px;

padding-bottom:80px;

}

.hero h1{

font-size:38px;

line-height:1.2;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.btn-primary,
.btn-secondary{

width:100%;

margin:0;

}

.hero-right img{

width:100%;

max-width:420px;

margin:auto;

}

/* Navbar */

.logo img{

width:150px;

}

.logo span{

font-size:18px;

}

/* Services */

.services-grid{

grid-template-columns:1fr;

gap:25px;

}

.service-card{

padding:25px;

}

/* Pricing */

.pricing-grid{

grid-template-columns:1fr;

}

.pricing-card{

padding:30px 25px;

}

/* Portfolio */

.portfolio-grid{

grid-template-columns:1fr;

}

/* Why Choose */

.why-grid{

grid-template-columns:1fr;

}

/* Counter */

.why-counter{

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

gap:20px;

}

/* Testimonials */

.testimonial-grid{

grid-template-columns:1fr;

}

/* Contact */

.contact-wrapper{

display:flex;

flex-direction:column;

gap:30px;

}

.contact-info,
.contact-form{

width:100%;

}

/* Footer */

.footer-grid{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.footer-social{

justify-content:center;

}

}


/*=========================
576px
=========================*/

@media(max-width:576px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:15px;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:15px;

}

/* Stats */

.stats{

grid-template-columns:1fr;

}

.stat-box{

padding:25px;

}

/* Counter */

.why-counter{

grid-template-columns:1fr;

}

/* Buttons */

.quote-btn{

display:none;

}

.whatsapp-btn{

display:none;

}

/* Mobile Menu */

.mobile-menu{

width:100%;

}

/* Forms */

input,
select,
textarea{

font-size:15px;

padding:14px;

width:100%;

}

button{

width:100%;

}

}


/*=========================
420px
=========================*/

@media(max-width:420px){

.hero h1{

font-size:26px;

}

.hero-badge{

font-size:13px;

padding:8px 15px;

}

.btn-primary,
.btn-secondary{

padding:14px;

font-size:15px;

}

.service-card{

padding:20px;

}

.pricing-card{

padding:20px;

}

.plan-name{

font-size:24px;

}

.price h2{

font-size:36px;

}

.footer{

padding-top:60px;

}

.footer-bottom{

font-size:14px;

}

}


/*==================================================
        RESPONSIVE.CSS
        PART - 3
===================================================*/


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

@media (max-width:360px){

.container{

padding:0 15px;

}

.hero{

padding-top:110px;

padding-bottom:60px;

}

.hero h1{

font-size:24px;

line-height:1.3;

}

.hero p{

font-size:14px;

}

.section-title h2{

font-size:26px;

}

.section-title span{

font-size:13px;

}

.logo span{

font-size:16px;

}

.logo img{

width:38px;

}

.service-card{

padding:18px;

}

.pricing-card{

padding:18px;

}

.footer{

text-align:center;

}

.footer-logo{

margin:auto;

}

}



/*==================================
Mobile Floating Buttons
==================================*/

@media(max-width:768px){

.whatsapp-float{

position:fixed;

bottom:20px;

right:20px;

width:58px;

height:58px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

z-index:999;

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

}

#topBtn{

right:20px;

bottom:95px;

width:45px;

height:45px;

font-size:18px;

}

}



/*==================================
Portfolio
==================================*/

@media(max-width:768px){

.portfolio-card{

border-radius:18px;

overflow:hidden;

}

.portfolio-overlay{

padding:20px;

}

.portfolio-overlay h3{

font-size:20px;

}

.portfolio-buttons{

flex-direction:column;

gap:12px;

}

.portfolio-btn,
.portfolio-btn-light{

width:100%;

text-align:center;

}

}



/*==================================
Contact Form
==================================*/

@media(max-width:768px){

.contact-form{

padding:25px;

border-radius:18px;

}

.contact-info{

padding:25px;

}

.form-group{

margin-bottom:18px;

}

input,
select,
textarea{

font-size:15px;

}

}



/*==================================
Testimonials
==================================*/

@media(max-width:768px){

.testimonial-card{

padding:25px;

}

.client{

flex-direction:column;

text-align:center;

gap:12px;

}

.client img{

margin:auto;

}

}



/*==================================
Footer
==================================*/

@media(max-width:768px){

.footer{

padding-top:70px;

}

.footer-box{

margin-bottom:25px;

}

.footer-box ul li{

margin-bottom:12px;

}

.footer-social{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.footer-bottom{

padding:18px 0;

font-size:14px;

}

}



/*==================================
Loader
==================================*/

@media(max-width:576px){

.loader-circle{

width:45px;

height:45px;

border-width:4px;

}

}



/*==================================
Landscape Phones
==================================*/

@media(max-height:500px){

.hero{

padding-top:100px;

padding-bottom:60px;

}

.mobile-menu{

overflow-y:auto;

}

}
/*==================================================
        RESPONSIVE.CSS
        PART - 4 (FINAL)
===================================================*/


/*==========================
 Extra Large Devices
==========================*/

@media (min-width:1600px){

.container{

max-width:1400px;

}

.hero h1{

font-size:72px;

}

.hero p{

font-size:20px;

max-width:650px;

}

}



/*==========================
 Hide Animations On Mobile
==========================*/

@media(max-width:768px){

.hero-card{

display:none !important;

animation:none;

}

.service-card:hover,
.pricing-card:hover,
.portfolio-card:hover,
.why-card:hover,
.testimonial-card:hover{

transform:none;

}

}



/*==========================
 Images Responsive
==========================*/

img{

max-width:100%;

height:auto;

display:block;

}



/*==========================
 Tables
==========================*/

table{

width:100%;

overflow-x:auto;

display:block;

}



/*==========================
 Form Fix
==========================*/

input,
textarea,
select{

outline:none;

border:1px solid #ddd;

border-radius:10px;

width:100%;

font-family:inherit;

}

textarea{

resize:vertical;

}



/*==========================
 Button Fix
==========================*/

button{

cursor:pointer;

border:none;

font-family:inherit;

}



/*==========================
 Prevent Horizontal Scroll
==========================*/

html,
body{

overflow-x:hidden;

}



/*==========================
 Smooth Touch
==========================*/

*{

-webkit-tap-highlight-color:transparent;

}



/*==========================
 Selection
==========================*/

::selection{

background:#2563eb;

color:#fff;

}



/*==========================
 Print Style
==========================*/

@media print{

.header,
.footer,
.whatsapp-float,
#topBtn,
.mobile-menu,
.menu-toggle{

display:none !important;

}

body{

background:#fff;

color:#000;

}

}



/*==========================
 Performance
==========================*/

img{

image-rendering:auto;

}



/*==========================
 Accessibility
==========================*/

a:focus,
button:focus,
input:focus,
textarea:focus{

outline:2px solid #2563eb;

outline-offset:3px;

}



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

@media(max-height:450px){

.hero{

padding-top:90px;

padding-bottom:60px;

}

}



/*==========================
 End
==========================*/