/*==================================================
PRINTQLY
HOME PAGE CSS
Version 1.0
==================================================*/

/* HERO SECTION */
.hero{
    padding:20px 0;
    background:linear-gradient(180deg,#0b0b0b,#141414);
}

.hero-content{
    max-width:700px;
}

.hero h1{
    font-size:60px;
    line-height:1.2;
    margin-bottom:20px;
}

.hero p{
    font-size:18px;
    color:var(--text-light);
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

/* PRINT METHOD */
.print-methods{
    padding:30px 0;
}

.method-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.method-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;
    padding:35px;
    transition:.3s;
}

.method-card:hover{
    border-color:var(--primary);
    transform:translateY(-5px);
}

.method-card h3{
    margin-bottom:15px;
}

.method-card ul{
    margin:20px 0;
}

.method-card li{
    margin-bottom:12px;
}

/* FEATURES */
.features{
    padding:80px 0;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.feature-card{
    background:var(--card);
    border-radius:20px;
    padding:30px;
    text-align:center;
}

/* HOW IT WORKS */
.timeline{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    text-align:center;
}

.timeline-step{
    background:var(--surface);
    border-radius:18px;
    padding:25px;
}

/* SHOP SEARCH */
.shop-search{
    padding:80px 0;
}

.search-box{
    background:var(--card);
    border-radius:24px;
    padding:30px;
    margin-bottom:40px;
}

.search-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

/* SERVICES */
.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.service-card{
    background:var(--card);
    border-radius:20px;
    padding:25px;
    text-align:center;
}

/* DOWNLOAD APP */
.download-app{
    padding:30px 0;
    text-align:center;
}

/* FAQ */
.faq-section{
    padding:30px 0;
}

.faq-item{
    background:var(--card);
    border-radius:18px;
    margin-bottom:15px;
    padding:20px;
}

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

.method-grid,
.feature-grid,
.search-grid,
.service-grid,
.timeline{

grid-template-columns:1fr;

}

.hero h1{

font-size:38px;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

}