/* ==========================================================
   TEKNIVO MARKETPLACE
   MAIN STYLE
========================================================== */


/* RESET */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


body {

    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fb;
    color: #1f2937;

}


a {

    text-decoration: none;
    color: inherit;

}




/* ==========================================================
   HEADER
========================================================== */


.market-header {

    background: white;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 100;

}


.header-container {

    max-width: 1400px;
    margin: auto;

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

    padding: 20px;

    gap: 30px;

}




.brand h1 {

    font-size: 28px;
    font-weight: 800;
    color: #2563eb;

}


.brand span {

    font-size: 14px;
    color: #64748b;

}





/* SEARCH */


.search-box {

    flex: 1;
    display: flex;

    max-width: 650px;

}


.search-box input {

    width: 100%;

    padding: 14px 18px;

    border:

    1px solid #cbd5e1;

    border-radius: 10px 0 0 10px;

    font-size: 15px;

}


.search-box button {


    width: 60px;

    border: none;

    background: #2563eb;

    color: white;

    font-size: 20px;

    border-radius: 0 10px 10px 0;

    cursor: pointer;


}





.header-actions {

    display: flex;

    gap: 10px;

}


.header-actions button {


    padding: 12px 18px;

    border-radius: 8px;

    border: 1px solid #d1d5db;

    background: white;

    cursor: pointer;


}



.header-actions button:hover {


    background: #f1f5f9;


}







/* ==========================================================
   CATEGORY MENU
========================================================== */


.category-menu {

    background: white;

    border-bottom:

    1px solid #e5e7eb;


}


.category-container {


    max-width: 1400px;

    margin:auto;

    display:flex;

    gap:30px;

    padding:15px 20px;

    overflow-x:auto;


}



.category-container a {


    color:#475569;

    font-weight:600;

    white-space:nowrap;


}



.category-container a:hover {


    color:#2563eb;


}







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


.hero {


    max-width:1400px;

    margin:40px auto;

    min-height:420px;

    border-radius:20px;

    background:

    linear-gradient(

    135deg,

    #2563eb,

    #1e40af

    );


    display:flex;

    align-items:center;


    padding:60px;


    color:white;


}



.hero-content {


    max-width:600px;


}


.hero h2 {


    font-size:48px;

    line-height:1.1;

    margin-bottom:20px;


}



.hero p {


    font-size:20px;

    margin-bottom:30px;


}



.hero button {


    background:white;

    color:#2563eb;

    padding:15px 30px;

    border:none;

    border-radius:10px;

    font-weight:bold;

    cursor:pointer;


}







/* ==========================================================
   SECTIONS
========================================================== */


.section {


    max-width:1400px;

    margin:50px auto;

    padding:0 20px;


}



.section-title {


    margin-bottom:25px;


}


.section-title h2 {


    font-size:30px;

}







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


.product-grid {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


}



.product-card {


    background:white;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;


}



.product-card:hover {


    transform:translateY(-5px);


}




.product-image {


    height:260px;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;


}


.product-image img {


    width:100%;

    height:100%;

    object-fit:cover;


}



.product-info {


    padding:20px;


}


.product-info h3 {


    font-size:18px;

    margin-bottom:10px;


}



.product-info p {


    font-size:22px;

    font-weight:bold;

    color:#16a34a;


}







/* ==========================================================
   STORES
========================================================== */


.store-grid {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


}



.store-card {


    background:white;

    padding:25px;

    border-radius:16px;

    text-align:center;


}



.store-logo {


    width:100px;

    height:100px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    background:#e2e8f0;

    display:flex;

    align-items:center;

    justify-content:center;


}



.store-logo img {


    width:100%;

    height:100%;

    object-fit:cover;


}



.store-card a {


    display:inline-block;

    margin-top:20px;

    background:#2563eb;

    color:white;

    padding:12px 25px;

    border-radius:8px;


}








/* ==========================================================
   CATEGORIES
========================================================== */


.category-grid {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(160px,1fr));


    gap:20px;


}



.category-grid div {


    background:white;

    padding:30px;

    text-align:center;

    border-radius:15px;

    font-size:35px;


}



.category-grid span {


    display:block;

    font-size:16px;

    margin-top:10px;

    font-weight:bold;


}







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


.footer {


    background:#111827;

    color:white;

    text-align:center;

    padding:50px 20px;

    margin-top:80px;


}


.footer h3 {


    font-size:25px;

    margin-bottom:15px;


}







/* ==========================================================
   RESPONSIVE
========================================================== */


@media(max-width:900px){


.header-container {


    flex-direction:column;


}



.hero {


    padding:40px 25px;


}


.hero h2 {


    font-size:35px;


}



}