/* ===========================
   QC Electronics Custom CSS
=========================== */

/* What We Buy */
#what-we-buy .buy-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
    margin-top:2rem;
}

#what-we-buy .buy-grid div{
    border:1px solid rgba(255,255,255,.2);
    padding:1rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-radius:6px;
    transition:.25s;
}

#what-we-buy .buy-grid div:hover{
    background:rgba(255,255,255,.06);
}

/* Reviews */

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem;
    margin-top:2rem;
}

.testimonial{
    border:1px solid rgba(255,255,255,.15);
    padding:2rem;
    border-radius:8px;
    transition:.3s;
}

.testimonial:hover{
    transform:translateY(-5px);
    border-color:#ffffff;
}

.stars{
    color:#ffd700;
    font-size:1.2rem;
    letter-spacing:4px;
    margin-bottom:1rem;
}

.name{
    font-weight:700;
    margin-top:1rem;
}

/* Buttons */

.button{
    border-radius:6px;
}

.button.primary{
    background:#ffffff;
    color:#242943 !important;
    font-weight:700;
}

.button.primary:hover{
    background:#f5f5f5;
}

/* Contact */

.contact-method a{
    text-decoration:none;
}

.contact-method a:hover{
    color:#ffffff;
}

/* Tile Images */

.tiles article .image img{
    object-fit:cover;
    width:100%;
    height:100%;
}

.tiles article{
    overflow:hidden;
}

/* Hero */

#banner{
    min-height:90vh;
}

#banner h1{
    font-size:4rem;
}

#banner p{
    font-size:1.25rem;
}

/* Smooth Hover */

.buy-grid div,
.testimonial,
.button,
.tiles article{
    transition:.3s ease;
}

/* Mobile */

@media screen and (max-width:980px){

    #banner h1{
        font-size:3rem;
    }

}

@media screen and (max-width:736px){

    #banner{
        min-height:85vh;
    }

    #banner h1{
        font-size:2.3rem;
        line-height:1.2;
    }

    #banner p{
        font-size:1rem;
        line-height:1.6;
    }

    .buy-grid{
        grid-template-columns:1fr !important;
    }

    .reviews-grid{
        grid-template-columns:1fr !important;
    }

    .button{
        width:100%;
        text-align:center;
        margin-bottom:.75rem;
    }

    #contact .actions{
        width:100%;
    }

    #contact .actions li{
        width:100%;
        padding-left:0;
    }

    .testimonial{
        padding:1.5rem;
    }

    .tiles article{
        min-height:260px;
    }

    #what-we-buy .buy-grid div{
        font-size:.95rem;
    }

}

@media screen and (max-width:480px){

    #banner h1{
        font-size:2rem;
    }

    #banner p{
        font-size:.95rem;
    }

    .major h2{
        font-size:1.8rem;
    }

    .buy-grid div{
        padding:.9rem;
    }

}