/* ============================================================
   Janason Powelec
   Downloads Page
   ============================================================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:rgb(231, 228, 228);
}


/* ===========================
   Hero Section
   =========================== */

.hero{

    width:100%;

    aspect-ratio:1920 / 1075;

    background-image:url("images/Hero-Image.webp");

    background-repeat:no-repeat;

    background-size:contain;

    background-position:center top;

    background-color:#0b4f4a;

}

.hero-overlay{

    position:absolute;

    top:50%;

    left:8%;

    transform:translateY(-50%);

    color:white;

    max-width:520px;

}

.hero-overlay h1{

    font-size:48px;

    margin-bottom:20px;

    font-weight:700;

    text-shadow:0 3px 10px rgba(0,0,0,0.6);

}

.hero-overlay p{

    font-size:22px;

    line-height:1.6;

    text-shadow:0 2px 8px rgba(0,0,0,0.5);

}

.page-title{

    background:#ffffff;

    padding:60px 20px;

    text-align:center;

}

.container{

    max-width:1200px;

    margin:auto;

}

.page-title h1{

    font-size:42px;

    color:#0f766e;

    margin-bottom:20px;

}

.page-title p{

    font-size:20px;

    color:#555;

}

/* ==========================================================
   PRODUCTS
===========================================================*/

.products{

    padding:80px 20px;

    background:#f5f7fa;

}

.product-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.product-card{

    background:#ffffff;

    border-radius:15px;

    padding:30px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:all .35s ease;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.product-card img{

    width:100%;

    height:220px;

    object-fit:contain;

    margin-bottom:20px;

}

.product-card h2{

    color:#00695c;

    font-size:30px;

    margin-bottom:8px;

}

.tagline{

    color:#f59e0b;

    font-weight:600;

    margin-bottom:18px;

    letter-spacing:1px;

}

.product-card p{

    line-height:1.7;

    color:#555;

    min-height:90px;

    margin-bottom:25px;

}

.btn{

    display:inline-block;

    text-decoration:none;

    padding:12px 28px;

    border-radius:30px;

    font-weight:bold;

    margin:8px;

    transition:.3s;

}

.download-btn{

    background:#00796b;

    color:white;

}

.download-btn:hover{

    background:#00584f;

}

.buy-btn{

    background:#f59e0b;

    color:white;

}

.buy-btn:hover{

    background:#d97706;

}

@media (max-width:1000px){

    .product-grid{

        grid-template-columns:1fr;

    }

}

.brochure-btn{
    background:#0d6efd;
    color:#fff;
}

.manual-btn{
    background:#198754;
    color:#fff;
}

.buy-btn{
    background:#f59e0b;
    color:#fff;
}


/*=========================================
            NAVIGATION BAR
==========================================*/

.navbar{

    background:#a2c9d6;

    box-shadow:0 3px 10px rgba(0,0,0,.12);

}

.navbar .container{

    max-width:1200px;

    margin:0 auto;

    padding:15px 25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.navbar ul{

    display:flex;

    justify-content:center;

    gap:60px;

    list-style:none;

    margin:0;

    padding:0;

}

.navbar li{

    margin:0;

}

.navbar a{

    text-decoration:none;

    color:#012e32;

    font-size:20px;

    font-weight:600;

    transition:0.3s;

}

.navbar a:hover{

    color:#f39c12;

}

.navbar a.active{

    color:#00796b;

    border-bottom:3px solid #f5c542;

    padding-bottom:5px;

}