/* ===========================
   Base
=========================== */

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

body{

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:#f8f9fa;

    color:#333;

    line-height:1.6;

}

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

.hero-section{

    position:relative;

    overflow:hidden;

}

.hero-image{

    width:100%;

    height:700px;

    object-fit:cover;

    display:block;

}

.hero-overlay{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    width:80%;

    color:#ffffff;

    text-shadow:
        0 2px 10px rgba(0,0,0,0.8);

}

.hero-overlay h1{

    font-size:4rem;

    font-weight:700;

    margin-bottom:20px;

}

.hero-overlay p{

    font-size:1.8rem;

    margin-bottom:30px;

}

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

section{

    padding-top:60px;

    padding-bottom:60px;

}

h2{

    font-weight:700;

    margin-bottom:25px;

}

/* ===========================
   Product Cards
=========================== */

.product-card{

    border:none;

    transition:all .3s;

    box-shadow:
        0 4px 20px rgba(0,0,0,0.08);

}

.product-card:hover{

    transform:translateY(-5px);

}

.product-card img{

    height:280px;

    object-fit:contain;

    padding:20px;

    background:#fff;

}

.product-card h5{

    text-align:center;

    font-weight:600;

}

/* ===========================
   Application Images
=========================== */

.bg-light img{

    width:100%;

    height:350px;

    object-fit:cover;

    border-radius:12px;

    box-shadow:
        0 4px 20px rgba(0,0,0,0.1);

}

/* ===========================
   Why Choose Us
=========================== */

.col-md-3 h4{

    font-size:2rem;

    color:#dc3545;

    font-weight:700;

}

.col-md-3 p{

    margin-top:10px;

}

/* ===========================
   Contact
=========================== */

.bg-dark{

    background:#1f2937 !important;

}

.bg-dark h2{

    color:#fff;

}

.bg-dark p{

    color:#ddd;

}

/* ===========================
   Button
=========================== */

.btn-danger{

    background:#dc3545;

    border:none;

    padding:12px 30px;

    font-weight:600;

}

.btn-danger:hover{

    background:#bb2d3b;

}

/* ===========================
   Footer
=========================== */

footer{

    background:#111827;

    color:#fff;

    padding:20px;

}

@media(max-width:768px){

    section{

        padding-top:30px;

        padding-bottom:30px;

    }

    .hero-section{

        display:flex;

        flex-direction:column-reverse;

        margin:0;

        padding:0;

    }

    .hero-overlay{

        position:static;

        transform:none;

        width:100%;

        background:#ffffff;

        color:#222;

        text-shadow:none;

        padding:20px 15px 15px 15px;

        margin:0;

    }

    .hero-overlay h1{

        font-size:2rem;

        color:#dc3545;

        margin-bottom:8px;

    }

    .hero-overlay p{

        font-size:1.1rem;

        color:#555;

        margin-bottom:15px;

    }

    .hero-image{

        width:100%;

        height:auto;

        display:block;

        margin:0;

    }

    .product-card img{

        height:220px;

    }

    .bg-light img{

        height:auto;

    }

}