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

@media (max-width:1100px){

.top-header .container{
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
}

.logo{
    width:100%;
    text-align:center;
}

.search-box{
    max-width:100%;
    width:100%;
}

.contact-info{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
}

.hero{
    height:650px;
}

.hero-content h1{
    font-size:46px;
}

.hero-content p{
    font-size:18px;
}

.machines{
    right:20px;
    bottom:20px;
}

.machines img{
    width:130px;
}

.machines img:nth-child(2){
    width:170px;
}

.features .container{
    grid-template-columns:repeat(2,1fr);
}

.about-intro,
.about-services{
    gap:35px;
}

.contact-layout{
    grid-template-columns:1fr;
}

}

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

@media (max-width:768px){

.mobile-toggle{
    display:block;
}

.nav-links{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#0056d6;
    display:none;
    flex-direction:column;
}

.nav-links.active{
    display:flex;
}

.nav-links li{
    width:100%;
}

.nav-links a{
    padding:18px;
    border-top:1px solid rgba(255,255,255,.15);
}

.products-toggle{
    width:100%;
    padding:18px;
    color:#fff;
    text-align:left;
    border-top:1px solid rgba(255,255,255,.15);
}

.products-menu{
    position:static;
    width:100%;
    border-radius:0;
    box-shadow:none;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
}

.nav-products.open .products-menu{
    display:block;
}

.products-menu a{
    padding-left:28px;
}

.hero{
    height:600px;
}

.hero-content{
    left:30px;
    right:30px;
}

.hero-content h1{
    font-size:34px;
}

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

.hero-btn{
    padding:13px 26px;
}

.machines{
    display:none;
}

.prev,
.next{
    width:42px;
    height:42px;
    font-size:20px;
}

.prev{
    left:10px;
}

.next{
    right:10px;
}

.features .container{
    grid-template-columns:1fr;
}

.about{
    padding:70px 0;
}

.about-heading{
    margin-bottom:35px;
}

.about-heading h1,
.about-heading h2,
.about-services h2,
.about-services h3,
.about-results h2,
.about-results h3{
    font-size:30px;
}

.about-intro,
.about-services{
    grid-template-columns:1fr;
    margin-bottom:55px;
}

.about-intro{
    gap:30px;
}

.about-visual{
    min-height:280px;
}

.about-visual img{
    height:210px;
}

.about-results{
    padding:32px 20px;
}

.about-stats{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.about-stats article{
    min-height:120px;
    padding:15px;
}

.about-stats strong{
    font-size:23px;
}

.about-services{
    padding:60px 0 35px;
}

.about-services ul{
    gap:8px 16px;
}

.about-actions{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
}

.contact-hero{
    padding:75px 0;
}

.contact-hero h1{
    font-size:34px;
}

.contact-page{
    padding:65px 0;
}

.contact-details,
.contact-form-card{
    padding:28px 20px;
}

.contact-form-grid{
    grid-template-columns:1fr;
}

.contact-map{
    padding-bottom:65px;
}

.contact-map iframe{
    height:320px;
}

.contact-cta > .container{
    flex-direction:column;
    align-items:flex-start;
}

.card{
    padding:35px 25px;
}

.online-service{
    display:none;
}

.contact-info{
    flex-direction:column;
    gap:15px;
}

.quote-btn{
    width:100%;
    text-align:center;
}

.online-support{
    bottom:82px;
}

}

/* ===============================
SMALL PHONES
================================ */

@media (max-width:480px){

.top-header{
    padding:15px 0;
}

.logo img{
    height:52px;
}

.search-box input{
    height:44px;
}

.hero{
    height:520px;
}

.hero-content{
    top:48%;
}

.hero-content h1{
    font-size:28px;
}

.about-stats{
    grid-template-columns:1fr;
}

.about-services ul{
    grid-template-columns:1fr;
}

.contact-hero h1{
    font-size:29px;
}

.contact-cta-actions{
    width:100%;
    flex-direction:column;
}

.contact-cta-actions a{
    text-align:center;
}

.hero-content p{
    font-size:15px;
}

.hero-btn{
    font-size:14px;
}

footer{
    padding:25px 0;
}

footer p{
    font-size:13px;
}

}

/* ===============================
LARGE SCREENS
================================ */

@media (min-width:1500px){

.container{
    max-width:1450px;
}

.hero-content h1{
    font-size:72px;
}

.hero-content p{
    font-size:24px;
}

.machines img{
    width:220px;
}

.machines img:nth-child(2){
    width:280px;
}

}