/*=========================================================
  Systronics Website
  Responsive Styles
=========================================================*/

/* Large tablets */
@media (max-width: 1024px){

    .hero-grid{
        grid-template-columns:1fr;
        gap:2.5rem;
    }

    .hero h1{
        font-size:3.2rem;
    }

    .header-inner{
        min-height:76px;
    }
}

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

    .header-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem;
        padding:1rem 0;
    }

    .main-nav{
        width:100%;
        flex-wrap:wrap;
        gap:1rem;
    }

    .hero{
        padding:4rem 0;
    }

    .hero h1{
        font-size:2.6rem;
    }

    .section{
        padding:3.5rem 0;
    }

    .section-title{
        font-size:1.9rem;
    }

    .card{
        padding:1.5rem;
    }

    .placeholder-image{
        min-height:300px;
    }
}

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

    body{
        font-size:0.95rem;
    }

    .container{
        width:94%;
    }

    .logo{
        font-size:1.6rem;
    }

    .logo-tagline{
        font-size:.72rem;
    }

    .hero h1{
        font-size:2.1rem;
    }

    .btn{
        width:100%;
        margin-bottom:.75rem;
    }

    .main-nav{
        flex-direction:column;
        align-items:flex-start;
    }

    .card-grid{
        grid-template-columns:1fr;
    }

    .site-footer{
        padding:2rem 0;
    }
}