/*=========================================================
 Systronics Website
 components.css
 Reusable UI Components
=========================================================*/

/* ---------- Layout ---------- */

.section-alt{
    background:var(--color-light);
}

.two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
}

.center{
    text-align:center;
}

/* ---------- Feature Cards ---------- */

.feature-card{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-large);
    padding:2rem;
    box-shadow:var(--shadow-small);
    transition:var(--transition-normal);
    height:100%;
}

.feature-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-large);
}

.feature-card h3{
    margin-top:0;
    color:var(--color-blue);
}

/* ---------- Callout ---------- */

.callout{
    background:linear-gradient(135deg,var(--color-blue),#6f8cab);
    color:#fff;
    border-radius:var(--radius-large);
    padding:3rem;
}

.callout h2,
.callout p{
    color:#fff;
}

/* ---------- Statistic ---------- */

.stat{
    text-align:center;
    padding:1.5rem;
}

.stat-number{
    font-size:2.8rem;
    font-weight:700;
    color:var(--color-green);
}

.stat-label{
    color:var(--text-secondary);
}

/* ---------- Timeline ---------- */

.timeline{
    border-left:4px solid var(--color-green);
    margin-left:1rem;
    padding-left:2rem;
}

.timeline-item{
    margin-bottom:2rem;
    position:relative;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:-2.55rem;
    top:.2rem;
    width:18px;
    height:18px;
    background:var(--color-orange);
    border-radius:50%;
}

.timeline-year{
    color:var(--color-green);
    font-weight:700;
}

/* ---------- Product Block ---------- */

.product-feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
    margin:4rem 0;
}

.product-image{
    min-height:320px;
    border:3px dashed #b7c8d8;
    border-radius:var(--radius-large);
    background:#eef6fb;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem;
}

/* ---------- Contact Card ---------- */

.contact-card{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-large);
    padding:2rem;
    box-shadow:var(--shadow-small);
}

.contact-card h3{
    margin-top:0;
    color:var(--color-blue);
}

/* ---------- Forms ---------- */

.form-control{
    width:100%;
    padding:.9rem 1rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-small);
    font:inherit;
    margin-bottom:1rem;
}

textarea.form-control{
    min-height:180px;
    resize:vertical;
}

/* ---------- Responsive ---------- */

@media(max-width:900px){
    .two-column,
    .product-feature{
        grid-template-columns:1fr;
    }
}