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

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


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

.hero{

    width:100%;

    aspect-ratio:1920 / 800;

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

    background-repeat:no-repeat;

    background-size:contain;

    background-position:center top;

    background-color:#0b4f4a;

}



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

.products{

    padding:40px 0;

    background:#89aebd;

}

.product-grid{

    display:grid;

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

    gap:35px;

}

.product-card{

    background:#96c7d0;

    border-radius:15px;

    padding:30px;

    text-align:center;

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

    transition:all .35s ease;    

    font-size:20px;

}




.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;

}



.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: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 .container{

    display:flex;
    justify-content:center;
    align-items:center;

    max-width:1200px;
    margin:auto;

    padding:15px 25px;

}

.navbar li {

    margin: 0;
}

.navbar a {

    text-decoration: none;
    color: #012e32;

    font-size: 18px;
    font-weight: 600;

    transition: 0.3s;
}



.navbar ul{
    display:flex;
    justify-content:center;
    gap:60px;
    list-style:none;
    margin:0;
    padding:0;
}


/* ==============================
   SECTION SPACING
============================== */

.about,
.products,
.page-title{

    padding:15px 0;

}

.product-card{

    background:#c1d1d8;

}

body{

    margin:0;

    font-family:"Segoe UI", Arial, sans-serif;

    background:#a2c9d6;

    color:#333;

}



.products h2,
.about h2,
.page-title h1{

    color:#006d77;

    text-align:center;

    font-size:44px;

    margin-bottom:20px;

}

.about p,
.page-title p{

    max-width:900px;

    margin:auto;

    line-height:1.8;

    text-align:center;

    font-size:20px;

    color:#555;

}


.navbar{

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

}


.navbar a:hover{

    color:#f39c12;

}

.container{

    max-width:1200px;

    margin:0 auto;

    padding:0 20px;

}

/*====================================================
                    FOOTER
====================================================*/

.footer{

    background:#0b4f4a;
    color:#ffffff;
    padding:60px 0 20px;

}

.footer-grid{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:120px;

}

.footer-left{

    width:55%;

}

.footer-right{

    width:35%;

}

.footer-left h2{

    color:#ffffff;

    font-size:42px;

    margin-bottom:20px;

}

.footer-left p{

    font-size:22px;

    line-height:1.7;

}

.footer-right h3{

    color:#f5c542;

    font-size:30px;

    margin-bottom:20px;

}

.footer-right p{

    margin-bottom:18px;

    font-size:21px;

}

.footer a{

    color:#ffffff;

    text-decoration:none;

}

.footer a:hover{

    color:#f5c542;

}

.footer-links{

    margin-top:30px;

}

.footer-links a{

    display:inline-block;

    margin-right:25px;

    font-weight:600;

}

.footer-bottom{

    margin-top:40px;

    border-top:1px solid rgba(255,255,255,.25);

    padding-top:20px;

    text-align:center;

    color:#d5e7ea;

}

@media(max-width:900px){

    .footer-grid{

        flex-direction:column;

    }

    .footer-left,
    .footer-right{

        width:100%;

    }

}

.consult-btn{

    display:inline-block;

    margin-top:30px;

    padding:15px 35px;

    background:#00796b;

    color:#ffffff !important;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    border-radius:40px;

    box-shadow:0 6px 15px rgba(0,0,0,.20);

    transition:0.3s;

}

.consult-btn:hover{

    background:#f5c542;

    color:#0b4f4a !important;

}

/* ==========================================
   ARTICLE GROUP
========================================== */

.article-group{

    background:#9ab9cd;

}
.article-container{

    max-width:1200px;

    margin:0 auto;

    background:#8fd3d3;

    border-radius:18px;

    padding:40px;

    box-shadow:0 10px 30px rgba(0,0,0,0.15);

   
    padding:50px 50px 60px 50px;
}



.article-container h2{

    text-align:center;

    color:#365c5f;

    font-size:40px;

    margin-bottom:20px;

}

.article-container p{

    text-align:center;

    font-size:24px;

    color:#555;

    line-height:1.8;

    max-width:900px;

    margin:0 auto 40px;

}

.article-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:30px;

}

.article-card{

    display:flex;

    align-items:center;

    gap:20px;

    background:#a7bde3;        /* Light blue instead of white */

    border:1px solid #d5e8ee;

    border-radius:16px;

    padding:28px;

    min-height:140px;

    box-shadow:0 6px 18px rgba(0,0,0,.10);

    transition:.3s;

}

.article-card:hover{

    transform:translateY(-5px);

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

}

.article-card a{

    color:#0a3b8c;

    text-decoration:none;

    font-size:30px;

    font-weight:700;

    line-height:1.4;

    display:block;

    width:100%;

}

.article-card a:hover{

    color:#006d77;

}


.article-index{
    padding:40px 0;
    background:#afd2ea;
}

.article-index h2{
    text-align:center;
    margin-bottom:30px;
    color:#006d77;
}

.index-grid{

    display:grid;

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

    gap:15px;

    max-width:900px;

    margin:auto;

}

.index-grid a{

    display:block;

    background:rgb(121, 173, 226);

    padding:16px;

    border-radius:8px;

    text-decoration:none;

    color:#006d77;

    font-size:20px; 

    font-weight:600;

    text-align:center;

    transition:.3s;

}

.index-grid a:hover{

    background:#006d77;

    color:white;

}

.linkedin-icon{

    width:48px;

    height:48px;

    flex-shrink:0;

}

.article-info{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.article-card a{

    color:#0a3b8c;

    text-decoration:none;

    font-size:30px;

    font-weight:700;

    line-height:1.35;

}

.article-card a:hover{

    color:#00796b;

}

.article-type{

    font-size:15px;

    color:#777;

    font-weight:500;

    letter-spacing:.5px;

}

.article-card{

    transition:.35s;

    cursor:pointer;

}

.article-card:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 30px rgba(0,0,0,.18);

    border-color:#00796b;

}

.article-card{

    border-top:5px solid #00796b;

}

.article-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px;

    margin-top:40px;

}

.article-title{

    width:100%;

    color:#0a3b8c;

    font-size:24px;

    font-weight:700;

    line-height:1.35;

}