/* ==================================================
   BOOK TO SERVE
   RESPONSIVE.CSS
================================================== */

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

@media (max-width: 1200px){

.container{

    width:95%;

}

.hero-content h1{

    font-size:48px;

}

.hero-content h2{

    font-size:24px;

}

}



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

@media (max-width: 992px){

.nav-container{

    flex-direction:column;

    gap:20px;

}

.nav-menu{

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content{

    order:2;

}

.hero-image{

    order:1;

}

.hero-content h1{

    font-size:42px;

}

.hero-content h2{

    font-size:24px;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.powered-by img{

    margin:auto;

}

.stats-grid{

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

}

.services-grid{

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

}

.why-grid{

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

}

.trust-grid{

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

}

.vmp-grid{

    grid-template-columns:1fr;

}

.leadership-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-brand img,
.footer-company img{

    margin:auto;

}

}



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

@media (max-width: 768px){

.section-title h1,
.section-title h2{

    font-size:34px;

}

.hero{

    padding:70px 0;

}

.hero-content h1{

    font-size:36px;

}

.hero-content h2{

    font-size:22px;

}

.hero-content p{

    font-size:16px;

}

.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

}

.hero-buttons{

    flex-direction:column;

}

.stats-grid{

    grid-template-columns:1fr;

}

.services-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.trust-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.leader-image img{

    height:auto;

}

.message-card{

    padding:30px;

}

.message-card h2{

    font-size:28px;

}

.supporter-box{

    padding:35px;

}

.supporter-box h2{

    font-size:30px;

}

.address-box{

    padding:25px;

}

.footer{

    text-align:center;

}

}



/* ==========================================
   SMALL MOBILE DEVICES
========================================== */

@media (max-width: 576px){

.header{

    position:relative;

}

.logo img{

    height:55px;

}

.nav-menu{

    flex-direction:column;

    align-items:center;

}

.hero-content h1{

    font-size:30px;

}

.hero-content h2{

    font-size:20px;

}

.section-title h1,
.section-title h2{

    font-size:28px;

}

.stat-item h3{

    font-size:34px;

}

.service-card{

    padding:25px;

}

.trust-layer{

    padding:25px;

}

.vmp-card{

    padding:25px;

}

.testimonial-card{

    padding:25px;

}

.contact-card{

    padding:25px;

}

.message-card{

    padding:25px;

}

.quote-box{

    font-size:18px;

}

.support-buttons{

    flex-direction:column;

}

.support-buttons a{

    width:100%;

}

}



/* ==========================================
   EXTRA SMALL DEVICES
========================================== */

@media (max-width: 400px){

.hero-content h1{

    font-size:26px;

}

.hero-content h2{

    font-size:18px;

}

.section-title h1,
.section-title h2{

    font-size:24px;

}

.btn-primary,
.btn-secondary{

    padding:12px 20px;

    font-size:14px;

}

.message-card p{

    font-size:16px;

}

.supporter-box h2{

    font-size:26px;

}

}



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

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

.hero{

    padding:40px 0;

}

.hero-content h1{

    font-size:32px;

}

.hero-content h2{

    font-size:20px;

}

}



/* ==========================================
   PRINT STYLES
========================================== */

@media print{

.header,
.footer,
.hero-buttons,
.support-buttons{

    display:none;

}

body{

    background:#ffffff;

    color:#000000;

}

a{

    color:#000000;

    text-decoration:none;

}

}

/* ==========================================
   END OF FILE
========================================== */