/* =====================================================
   SafeHustle Responsive Stylesheet
   Load this AFTER style.css
   ===================================================== */

/* Large screens */
@media (max-width:1200px){
.container{width:94%;}
}

/* Tablets */
@media (max-width:992px){

.hero-grid,
.about-grid,
.contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
}

.navbar .container{
    flex-direction:column;
    gap:15px;
}

.nav-menu{
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

.hero h1,
.page-hero h1{
    font-size:40px;
}

.section-title h2{
    font-size:32px;
}

}

/* Mobile */
@media (max-width:768px){

.container{
    width:94%;
}

.logo img{
    height:55px;
}

.navbar .container{
    flex-direction:column;
    align-items:center;
}

.nav-menu{
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:15px;
}

.nav-menu li{
    width:100%;
    text-align:center;
}

.download-btn,
.btn-primary,
.btn-outline{
    display:block;
    width:100%;
    margin:10px 0;
    text-align:center;
}

.hero,
.page-hero{
    padding:60px 20px;
}

.hero h1,
.page-hero h1{
    font-size:32px;
    line-height:1.3;
}

.hero p,
.page-hero p{
    font-size:16px;
}

.about-grid,
.services-grid,
.why-grid,
.steps-grid,
.stats-grid,
.footer-grid,
.contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
}

.service-card,
.why-card,
.step{
    padding:22px;
}

.about img{
    margin:0 auto;
}

.section-title h2{
    font-size:28px;
}

.cta h2{
    font-size:28px;
}

footer{
    text-align:center;
}

table{
    display:block;
    overflow-x:auto;
}

iframe,
video,
img{
    max-width:100%;
}

}

/* Small phones */
@media (max-width:480px){

.hero h1,
.page-hero h1{
    font-size:26px;
}

.hero p,
.page-hero p,
.about p,
.service-card p,
.why-card p{
    font-size:15px;
}

.section-title h2{
    font-size:24px;
}

.download-btn,
.btn-primary,
.btn-outline{
    padding:12px 18px;
}

}
@charset "utf-8";
/* CSS Document */