*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family:Arial,sans-serif;
    background:#0f1115;
    color:#fff;
    line-height:1.6;
}
.products-hero{
    min-height:55vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 20px;
    background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url('images/hero/products-banner.jpg') center/cover;
}
.products-hero span{
    color:#18A9D5;
    letter-spacing:3px;
    font-weight:bold;
}
.products-hero h1{
    font-size:3rem;
    margin:15px 0;
}
.products-hero p{
    max-width:700px;
    color:#ccc;
    margin:auto;
}
.products{
    max-width:1300px;
    margin:auto;
    padding:80px 20px;
}
.section-title, .products h2{
    text-align:center;
    font-size:2.2rem;
    margin-bottom:50px;
}
.product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
}
.product-card{
    background:#171b22;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

    display:flex;
    flex-direction:column;

    height:420px;   /* Fixed height */
}
.product-card:hover{
    transform:translateY(-8px);
    border-color:#18A9D5;
    box-shadow:0 15px 35px rgba(24,169,213,.18);
}
.product-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}
.product-card h3{
    padding:20px 20px 10px;
}
.product-card p{
    padding:0 20px;
    color:#cfcfcf;
    flex:1;
}

.enquire-btn{
    display:inline-block;
    margin-top:25px;
    padding:14px 30px;
    background:#111;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    border-radius:10px;
    transition:0.3s ease;
    border:2px solid #111;
}

.enquire-btn:hover{
    background:#fff;
    color:#111;
}

.other-products{
    max-width:1300px;
    margin:auto;
    padding:20px 20px 80px;
}
.other-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}
.other-card{
    background:#171b22;
    border-radius:18px;
    padding:30px;
    border:1px solid rgba(255,255,255,.08);
}
.other-card h3{
    color:#18A9D5;
    margin-bottom:18px;
}
.other-card ul{
    padding-left:18px;
}
.other-card li{
    margin:10px 0;
    color:#ddd;
}
.cta{
    background:#18A9D5;
    color:#000;
    text-align:center;
    padding:70px 20px;
}
.cta h2{
    font-size:2rem;
    margin-bottom:15px;
}
.cta .enquire-btn{
    display:inline-block;
    background:#000;
    color:#fff;
    margin-top:25px;
}
@media(max-width:768px){
    .products-hero h1{
        font-size:2.2rem;
    }
    .product-card img{
        height:200px;
    }
}
.back-home{
    padding:20px 40px;
}

.back-home a{
    color:#18A9D5;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    transition:.3s;
}

.back-home a:hover{
    color:#fff;
}
/* ==========================
   MOBILE RESPONSIVE
========================== */

@media (max-width: 992px){

.products-hero{
    padding:90px 20px 60px;
    min-height:45vh;
}

.products-hero h1{
    font-size:2.3rem;
    line-height:1.2;
}

.products-hero p{
    font-size:15px;
}

.product-grid{
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.other-grid{
    grid-template-columns:1fr;
}

}


@media (max-width:768px){

.products{
    padding:60px 15px;
}

.products-hero{
    min-height:40vh;
    text-align:center;
}

.products-hero h1{
    font-size:34px;
}

.products-hero p{
    font-size:15px;
}

.product-grid{
    grid-template-columns:1fr;
    gap:25px;
}

.product-card{
    height:auto;
}

.product-card img{
    height:220px;
}

.product-content{
    padding:20px;
}

.section-title{
    font-size:30px;
}

.other-products{
    padding:50px 15px;
}

.other-card{
    padding:25px;
}

.cta{
    padding:60px 20px;
}

.cta h2{
    font-size:28px;
}

.back-home{
    padding:15px;
}

.back-home a{
    font-size:15px;
}

}


@media (max-width:480px){

.products-hero h1{
    font-size:28px;
}

.products-hero p{
    font-size:14px;
}

.product-card img{
    height:190px;
}

.product-content h3{
    font-size:22px;
}

.product-content p{
    font-size:14px;
}

.cta h2{
    font-size:24px;
}

}