/*
|--------------------------------------------------------------------------
| Blessing Computers Retail Theme
| BC-THEME-01A
|--------------------------------------------------------------------------
*/


:root {

    --bc-primary:#0B1F3A;

    --bc-blue:#2563EB;

    --bc-accent:#F59E0B;

    --bc-background:#F8FAFC;

    --bc-white:#FFFFFF;

    --bc-text:#111827;

    --bc-muted:#64748B;

    --bc-border:#E2E8F0;

}


/*
|--------------------------------------------------------------------------
| Global
|--------------------------------------------------------------------------
*/

* {
    box-sizing:border-box;
}


body {

    margin:0;

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

    background:
    var(--bc-background);

    color:
    var(--bc-text);

}


a {

    text-decoration:none;

}



/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/


.bc-container {

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:
    0 24px;

}



/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/


.bc-header {

    background:
    var(--bc-white);

    border-bottom:
    1px solid var(--bc-border);

}


.bc-header-inner {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:
    20px 0;

}


.bc-brand {

    color:
    var(--bc-primary);

    font-size:
    28px;

    font-weight:
    800;

}


.bc-nav {

    display:flex;

    gap:24px;

}


.bc-nav a {

    color:
    var(--bc-text);

    font-weight:
    600;

}



/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/


.bc-button {

    display:inline-block;

    padding:
    14px 28px;

    border-radius:
    10px;

    font-weight:
    700;

}


.bc-button-primary {

    background:
    var(--bc-primary);

    color:white;

}


.bc-button-secondary {

    border:
    1px solid var(--bc-border);

    background:white;

    color:
    var(--bc-primary);

}



/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/


.bc-hero {

    padding:
    90px 0;

}


.bc-hero-grid {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:
    50px;

    align-items:center;

}


.bc-hero h1 {

    font-size:
    56px;

    line-height:
    1.1;

    margin-bottom:
    24px;

    color:
    var(--bc-primary);

}


.bc-hero p {

    font-size:
    20px;

    color:
    var(--bc-muted);

}



/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/


.bc-card {

    background:white;

    border:
    1px solid var(--bc-border);

    border-radius:
    16px;

    padding:
    24px;

    transition:
    .2s ease;

}


.bc-card:hover {

    transform:
    translateY(-4px);

}



/*
|--------------------------------------------------------------------------
| Product Grid
|--------------------------------------------------------------------------
*/


.bc-grid {

    display:grid;

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

    gap:
    24px;

}



/*
|--------------------------------------------------------------------------
| Product Card
|--------------------------------------------------------------------------
*/


.bc-product-title {

    font-size:
    20px;

    font-weight:
    700;

}


.bc-product-description {

    color:
    var(--bc-muted);

    margin-top:
    8px;

}



/*
|--------------------------------------------------------------------------
| Sections
|--------------------------------------------------------------------------
*/


.bc-section {

    padding:
    70px 0;

}


.bc-section-title {

    font-size:
    36px;

    color:
    var(--bc-primary);

    margin-bottom:
    32px;

}



/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/


.bc-footer {

    background:
    var(--bc-primary);

    color:white;

    padding:
    40px 0;

}



/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/


@media(max-width:768px){

    .bc-hero-grid {

        grid-template-columns:
        1fr;

    }


    .bc-grid {

        grid-template-columns:
        1fr;

    }


    .bc-nav {

        display:none;

    }


    .bc-hero h1 {

        font-size:
        40px;

    }

}