/*==================================================
 M Cargo Packers & Movers
 responsive.css
 Part 1
 Desktop • Laptop • Tablet
==================================================*/


/*=========================================
Large Desktop
(1600px and above)
=========================================*/

@media (min-width:1600px){

.container{

max-width:1450px;

}

.hero h1{

font-size:72px;

}

.hero p{

font-size:22px;

max-width:700px;

}

.section-title h2{

font-size:52px;

}

}


/*=========================================
Large Laptop
1400px
=========================================*/

@media (max-width:1400px){

.container{

max-width:1200px;

}

.hero h1{

font-size:58px;

}

.section-title h2{

font-size:44px;

}

}


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

@media (max-width:1200px){

.container{

width:94%;

}

.hero{

min-height:80vh;

}

.hero h1{

font-size:50px;

}

.hero p{

font-size:17px;

}

.nav ul{

gap:18px;

}

.quote-btn{

padding:12px 22px;

}

.about-grid{

gap:40px;

}

.service-grid{

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

}

.why-grid{

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

}

.process-grid{

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

}

.location-grid{

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

}

.footer-grid{

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

}

}


/*=========================================
Tablet Landscape
992px
=========================================*/

@media (max-width:992px){

section{

padding:70px 0;

}

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:36px;

}

.hero{

text-align:center;

padding:120px 0;

}

.hero-content{

max-width:100%;

}

.hero h1{

font-size:42px;

}

.hero p{

margin:auto auto 35px;

}

.hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.btn-secondary{

margin-left:0;

}

.hero-features{

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

margin-top:40px;

}

.topbar .container{

flex-direction:column;

gap:10px;

text-align:center;

}

.left-top{

justify-content:center;

flex-wrap:wrap;

}

.nav{

padding:15px 0;

}

.logo img{

height:58px;

}

/* Hide desktop menu (mobile menu comes in Part 2) */

.nav ul{

display:none;

}

.quote-btn{

display:none;

}

/* About */

.about-grid{

grid-template-columns:1fr;

gap:40px;

}

.about-text{

text-align:center;

}

.about-text ul{

text-align:left;

display:inline-block;

}

/* Stats */

.stats .container{

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

gap:30px;

}

.stat-box h2{

font-size:42px;

}

/* Why */

.why-grid{

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

}

/* Services */

.service-grid{

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

}

/* Process */

.process-grid{

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

}

/* Testimonials */

.testimonial-grid{

grid-template-columns:1fr;

}

/* Locations */

.location-grid{

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

}

/* CTA */

.cta h2{

font-size:36px;

}

.cta p{

font-size:17px;

}

/* Quote */

.quote-form{

grid-template-columns:1fr;

}

.full-width{

grid-column:auto;

}

/* Footer */

.footer-grid{

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

}

}


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

img{

max-width:100%;

height:auto;

display:block;

}


/*=========================================
Embedded Media
=========================================*/

iframe,
video{

max-width:100%;

}


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

html,
body{

overflow-x:hidden;

}

/*==================================================
 responsive.css
 Part 2
 Tablet Portrait & Mobile
====================================================*/


/*=========================================
Tablet Portrait
768px
=========================================*/

@media (max-width:768px){

section{

padding:60px 0;

}

.container{

width:92%;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:32px;

line-height:1.3;

}

.section-title p{

font-size:15px;

}

/*=========================
Hero
=========================*/

.hero{

min-height:70vh;

padding:100px 0;

}

.hero h1{

font-size:36px;

line-height:1.3;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons a{

width:260px;

text-align:center;

}

.hero-features{

grid-template-columns:1fr;

gap:15px;

}

/*=========================
Stats
=========================*/

.stats .container{

grid-template-columns:1fr 1fr;

}

.stat-box h2{

font-size:38px;

}

.stat-box p{

font-size:15px;

}

/*=========================
About
=========================*/

.about-text h2{

font-size:34px;

}

.about-text{

text-align:left;

}

/*=========================
Cards
=========================*/

.why-grid,
.service-grid,
.process-grid{

grid-template-columns:1fr;

}

.why-card,
.service-card,
.step{

padding:30px;

}

/*=========================
Locations
=========================*/

.location-grid{

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

}

/*=========================
CTA
=========================*/

.cta{

padding:70px 0;

}

.cta h2{

font-size:30px;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons a{

width:260px;

text-align:center;

}

/*=========================
Quote Form
=========================*/

.quote-form{

grid-template-columns:1fr;

gap:20px;

}

/*=========================
FAQ
=========================*/

.faq-item{

padding:22px;

}

.faq-item h3{

font-size:20px;

}

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

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid h3::after{

left:50%;
transform:translateX(-50%);

}

.footer-grid ul{

padding:0;

}

}


/*=========================================
Mobile
640px
=========================================*/

@media (max-width:640px){

.topbar{

font-size:13px;

}

.left-top{

flex-direction:column;

gap:8px;

}

.hero{

padding:80px 0;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:15px;

}

.stats .container{

grid-template-columns:1fr;

gap:25px;

}

.location-grid{

grid-template-columns:1fr;

}

.testimonial{

padding:25px;

}

.testimonial p{

font-size:15px;

}

.map iframe{

height:320px;

}

}


/*=========================================
Hamburger Menu
(Used with script.js)
=========================================*/

.menu-toggle{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

width:46px;

height:46px;

cursor:pointer;

border-radius:8px;

background:var(--primary);

}

.menu-toggle span{

display:block;

width:24px;

height:3px;

margin:3px 0;

background:#fff;

transition:.3s;

}

/* Mobile Navigation */

.mobile-nav{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#fff;

box-shadow:-5px 0 20px rgba(0,0,0,.15);

padding:90px 30px;

transition:.35s ease;

z-index:9999;

overflow-y:auto;

}

.mobile-nav.active{

right:0;

}

.mobile-nav ul{

display:flex;

flex-direction:column;

gap:20px;

}

.mobile-nav ul li a{

font-size:18px;

font-weight:600;

color:var(--dark);

}

.mobile-nav ul li a:hover{

color:var(--secondary);

}

/* Overlay */

.nav-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

.nav-overlay.active{

opacity:1;

visibility:visible;

}

/*==================================================
    responsive.css
    PART 3
    Small Mobile • Extra Small Devices
====================================================*/


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

@media (max-width:576px){

.container{

width:94%;

}

section{

padding:50px 0;

}

.section-title{

margin-bottom:35px;

}

.section-title span{

font-size:13px;

}

.section-title h2{

font-size:28px;

line-height:1.35;

}

.section-title p{

font-size:15px;

line-height:1.7;

}

/* Hero */

.hero{

padding:70px 0;

min-height:auto;

}

.hero h1{

font-size:30px;

line-height:1.35;

}

.hero p{

font-size:15px;

margin-bottom:30px;

}

.hero-buttons a{

width:100%;

max-width:280px;

padding:14px 20px;

}

.hero-features{

grid-template-columns:1fr;

}

/* About */

.about-text h2{

font-size:28px;

}

.about-text p{

font-size:15px;

}

.about-text ul li{

font-size:15px;

}

/* Cards */

.service-card,
.why-card,
.step,
.testimonial,
.contact-box{

padding:25px;

}

.service-card h3,
.why-card h3,
.step h3{

font-size:22px;

}

/* Stats */

.stat-box h2{

font-size:34px;

}

.stat-box p{

font-size:15px;

}

/* CTA */

.cta h2{

font-size:28px;

}

.cta p{

font-size:15px;

}

.cta-buttons a{

width:100%;

max-width:280px;

}

/* Quote */

.quote-form input,
.quote-form textarea{

padding:16px;

font-size:15px;

}

.submit-btn{

width:100%;

}

/* Footer */

footer{

padding-top:60px;

}

.footer-grid{

gap:30px;

}

.footer-grid h3{

font-size:22px;

}

.copyright{

font-size:14px;

}

}


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

@media (max-width:480px){

.hero h1{

font-size:26px;

}

.hero p{

font-size:14px;

}

.section-title h2{

font-size:24px;

}

.about-text h2{

font-size:24px;

}

.service-card,
.why-card,
.step{

padding:22px;

}

.location-grid{

grid-template-columns:1fr;

}

.faq-item{

padding:20px;

}

.faq-item h3{

font-size:18px;

}

.faq-item p{

font-size:14px;

line-height:1.7;

}

.map iframe{

height:280px;

}

}


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

@media (max-width:360px){

.hero h1{

font-size:22px;

}

.hero p{

font-size:13px;

}

.btn-primary,
.btn-secondary,
.quote-btn{

font-size:14px;

padding:12px 18px;

}

.section-title h2{

font-size:22px;

}

.section-title p{

font-size:14px;

}

.stat-box h2{

font-size:30px;

}

}


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

@media (max-width:768px){

.call-btn,
.whatsapp-btn{

width:52px;

height:52px;

font-size:22px;

}

.call-btn{

left:15px;

bottom:90px;

}

.whatsapp-btn{

right:15px;

bottom:90px;

}

}


/*=========================================
Back To Top
=========================================*/

@media (max-width:768px){

#topBtn{

width:48px;

height:48px;

right:15px;

bottom:20px;

font-size:18px;

}

}


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

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}


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

img{

max-width:100%;

height:auto;

}


/*=========================================
Prevent Overflow
=========================================*/

body{

overflow-x:hidden;

}


/*=========================================
Reduced Motion
=========================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}