/* ==========================================
   HERO SECTION
========================================== */

.hero{

    position:relative;

    height:90vh;

    background:url("../assets/images/hero/hero.jpg") center center/cover no-repeat;

    display:flex;

    align-items:center;

}

/* Dark Overlay */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

/* Hero Content */

.hero-content{

    position:relative;

    z-index:2;

    max-width:650px;

}

.hero-text h1{

    color:#FFFFFF;

    font-size:60px;

    margin-bottom:25px;

}

.hero-text p{

    color:#F5F5F5;

    font-size:20px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/* ==========================================
   ABOUT PREVIEW
========================================== */

.about-preview{

    background:#F8FAFC;

    text-align:center;

}

.about-preview h2{

    margin-bottom:20px;

}

.about-preview p{

    max-width:850px;

    margin:0 auto 30px;

}

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

.products-preview{

    background:#FFFFFF;

}

.product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.product-card{

    background:#FFFFFF;

    padding:30px;

    border-radius:12px;

    box-shadow:var(--shadow);

    text-align:center;

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-8px);

}

.product-card h3{

    color:var(--primary);

}

/* ==========================================
   SERVICES
========================================== */

.services-preview{

    background:#F8FAFC;

}

.service-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.service-card{

    background:white;

    padding:30px;

    border-radius:12px;

    box-shadow:var(--shadow);

    transition:.3s;

}

.service-card:hover{

    transform:translateY(-8px);

}

/* ==========================================
   WHY CHOOSE US
========================================== */

.why-us{

    background:#FFFFFF;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-top:40px;

}

.why-grid div{

    background:#F8FAFC;

    padding:25px;

    border-radius:10px;

    text-align:center;

    font-weight:600;

}

/* ==========================================
   CONTACT BANNER
========================================== */

.contact-banner{

    background:linear-gradient(135deg,#0D4C92,#1E6AC8);

    text-align:center;

    color:white;

}

.contact-banner h2{

    color:white;

}

.contact-banner p{

    color:white;

    margin-bottom:30px;

}
/*==========================================
FEATURED PRODUCTS
==========================================*/

.featured-products{

    padding:100px 0;

    background:#F8FAFC;

}

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading h2{

    font-size:42px;

    color:#0D47A1;

    margin-bottom:20px;

}

.section-heading p{

    max-width:700px;

    margin:auto;

    color:#666;

    font-size:18px;

}

.product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.product-card{

    background:#fff;

    border-radius:15px;

    overflow:hidden;

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

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-10px);

}

.product-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.product-card h3{

    padding:20px 25px 10px;

    color:#0D47A1;

}

.product-card p{

    padding:0 25px 30px;

}

.center-btn{

    text-align:center;

    margin-top:50px;

}

/*==========================================
HOME SERVICES
==========================================*/

.home-services{

    padding:100px 0;

    background:#FFFFFF;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.service-card{

    background:#F8FAFC;

    border-radius:15px;

    overflow:hidden;

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

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.service-card h3{

    padding:20px 25px 10px;

    color:#0D47A1;

}

.service-card p{

    padding:0 25px 30px;

}

/*==========================================
WHY CHOOSE US
==========================================*/

.why-choose{

    padding:100px 0;

    background:#F8FAFC;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.why-card{

    background:white;

    padding:35px;

    border-radius:15px;

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

    transition:.35s;

    border-top:5px solid #00A651;

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-card h3{

    color:#0D47A1;

    margin-bottom:20px;

    font-size:22px;

}

.why-card p{

    color:#555;

    line-height:1.8;

}

/*==========================================
HOME INDUSTRIES
==========================================*/

.home-industries{

    padding:100px 0;

    background:#FFFFFF;

}

.industry-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.industry-card{

    background:#fff;

    border-radius:15px;

    overflow:hidden;

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

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-10px);

}

.industry-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.industry-card h3{

    padding:20px 25px 10px;

    color:#0D47A1;

}

.industry-card p{

    padding:0 25px 30px;

    color:#555;

}

/*==========================================
HOME CTA
==========================================*/

.cta-home{

    background:linear-gradient(135deg,#0D47A1,#00A651);

    color:white;

    text-align:center;

    padding:100px 20px;

}

.cta-home h2{

    color:white;

    font-size:46px;

    margin-bottom:20px;

}

.cta-home p{

    max-width:750px;

    margin:0 auto 40px;

    font-size:20px;

    line-height:1.8;

    color:#F5F5F5;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-outline{

    background:transparent;

    color:white;

    border:2px solid white;

}

.btn-outline:hover{

    background:white;

    color:#0D47A1;

}