/* =========================================================
   Smart Mobile Care - INDEX PAGE CSS
   Page-specific styles only

   Common styles:
   assets/style.css

   This file:
   Home page specific styles
========================================================= */


/* =========================================================
   COMMON SECTION
========================================================= */

section{
    padding:60px 20px;
}

section > .title{

    text-align:center;

    font-size:30px;

    line-height:1.3;

    color:#1f2937;

    margin:0 0 35px;

    font-weight:700;
}


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

.hero{

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:70px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.95),
            rgba(6,182,212,.90)
        );

    color:#fff;
}


.hero-content{

    width:100%;

    max-width:850px;

    margin:auto;
}


.hero h1{

    margin:0 0 20px;

    font-size:42px;

    line-height:1.25;

    font-weight:700;
}


.hero p{

    max-width:700px;

    margin:0 auto 30px;

    font-size:17px;

    line-height:1.7;

    color:rgba(255,255,255,.95);
}


.hero-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;
}


.hero .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 24px;

    margin:0;

    background:#fff;

    color:#2563eb;

    border-radius:10px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;
}


.hero .btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);
}


.hero .btn-outline{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.85);
}


.hero .btn-outline:hover{

    background:#fff;

    color:#2563eb;
}


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

#about{

    background:#f8fafc;
}


#about .about{

    width:100%;

    max-width:950px;

    margin:0 auto;

    padding:30px;

    background:#fff;

    border-radius:16px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.07);
}


#about .about p{

    margin:0 0 15px;

    color:#4b5563;

    font-size:15px;

    line-height:1.9;

    text-align:justify;
}


#about .about p:last-child{

    margin-bottom:0;
}


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

#services{

    background:#fff;
}


#services .cards{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    display:grid;

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

    gap:20px;
}


#services .card{

    position:relative;

    background:#fff;

    padding:25px;

    border-radius:15px;

    border:1px solid #eef2f7;

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

    transition:.3s;
}


#services .card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.12);
}


#services .card h3{

    margin:0 0 10px;

    color:#2563eb;

    font-size:18px;
}


#services .card h3 i{

    width:24px;

    margin-right:5px;
}


#services .card p{

    margin:0;

    color:#6b7280;

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
   ACCESSORIES
========================================================= */

#accessories{

    background:#f8fafc;
}


.accessories-grid{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:18px;
}


.accessories-grid .card{

    background:#fff;

    padding:25px 15px;

    text-align:center;

    border-radius:14px;

    border:1px solid #eef2f7;

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

    transition:.3s;
}


.accessories-grid .card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 10px 22px rgba(0,0,0,.12);
}


.accessories-grid .card > i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    margin:0 auto 15px;

    border-radius:50%;

    background:#eff6ff;

    color:#2563eb;

    font-size:22px;
}


.accessories-grid .card h3{

    margin:0 0 8px;

    color:#2563eb;

    font-size:16px;
}


.accessories-grid .card p{

    margin:0;

    color:#6b7280;

    font-size:13px;

    line-height:1.6;
}


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

#products{

    background:#f3f4f6;
}


#products .title{

    margin-bottom:25px;
}


/* =========================================================
   PRODUCT SEARCH
========================================================= */

.product-search-box{

    width:100%;

    max-width:600px;

    margin:0 auto 18px;
}


#searchProduct{

    width:100%;

    height:48px;

    padding:0 18px;

    border:2px solid transparent;

    border-radius:12px;

    outline:none;

    background:#fff;

    color:#1f2937;

    font-family:inherit;

    font-size:14px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.06);

    transition:.25s;
}


#searchProduct:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.10);
}


#searchProduct::placeholder{

    color:#9ca3af;
}


/* =========================================================
   PRODUCT FILTERS
========================================================= */

.product-filters{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:30px;
}


.filter-btn{

    border:none;

    padding:9px 15px;

    border-radius:20px;

    background:#fff;

    color:#374151;

    font-family:inherit;

    font-size:13px;

    font-weight:500;

    cursor:pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);

    transition:.25s;
}


.filter-btn:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-1px);
}


.filter-btn.active{

    background:#2563eb;

    color:#fff;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

#products .product-grid{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:18px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

#products .product-card{

    position:relative;

    overflow:hidden;

    padding:0;

    background:#fff;

    border-radius:14px;

    border:1px solid #eef2f7;

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

    transition:.3s;
}


#products .product-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.12);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image-link{

    display:block;

    width:100%;

    overflow:hidden;

    background:#f8fafc;
}


.product-image-link img{

    width:100%;

    height:220px;

    display:block;

    object-fit:cover;

    transition:.3s;
}


.product-card:hover
.product-image-link img{

    transform:scale(1.03);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.product-card-content{

    padding:15px;
}


/* =========================================================
   FEATURED BADGE
========================================================= */

.featured-badge{

    display:inline-flex;

    align-items:center;

    gap:5px;

    padding:5px 9px;

    margin-bottom:8px;

    border-radius:20px;

    background:#eff6ff;

    color:#2563eb;

    font-size:10px;

    font-weight:600;
}


.featured-badge i{

    font-size:9px;
}


/* =========================================================
   BRAND
========================================================= */

.product-brand{

    margin-bottom:5px;

    color:#6b7280;

    font-size:11px;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.4px;
}


/* =========================================================
   PRODUCT NAME
========================================================= */

.product-name{

    min-height:42px;

    margin:0 0 10px;

    font-size:15px;

    line-height:1.4;

    font-weight:600;
}


.product-name a{

    color:#1f2937;

    text-decoration:none;

    transition:.2s;
}


.product-name a:hover{

    color:#2563eb;
}


/* =========================================================
   PRODUCT PRICE
========================================================= */

.product-price{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    margin-bottom:8px;
}


.product-price strong{

    color:#111827;

    font-size:18px;

    font-weight:700;
}


.product-price del{

    color:#9ca3af;

    font-size:12px;
}


.product-price .saving{

    color:#16a34a;

    font-size:10px;

    font-weight:600;
}


/* =========================================================
   STOCK
========================================================= */

.stock{

    display:flex;

    align-items:center;

    gap:5px;

    margin-bottom:12px;

    font-size:11px;

    font-weight:600;
}


.stock.available{

    color:#16a34a;
}


.stock.out-of-stock{

    color:#dc2626;
}


/* =========================================================
   PRODUCT ACTIONS
========================================================= */

.product-actions{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:7px;
}


.product-btn{

    min-height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    padding:9px 8px;

    border:none;

    border-radius:8px;

    font-family:inherit;

    font-size:11px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:.25s;
}


.product-btn.add-to-cart{

    background:#eff6ff;

    color:#2563eb;
}


.product-btn.add-to-cart:hover{

    background:#2563eb;

    color:#fff;
}


.product-btn.buy-now{

    background:#2563eb;

    color:#fff;
}


.product-btn.buy-now:hover{

    background:#1d4ed8;

    transform:translateY(-1px);
}


.product-btn.disabled{

    width:100%;

    grid-column:1 / -1;

    background:#e5e7eb;

    color:#9ca3af;

    cursor:not-allowed;
}


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

.empty-state{

    grid-column:
        1 / -1;

    width:100%;

    padding:50px 20px;

    text-align:center;

    background:#fff;

    border-radius:15px;

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


.empty-state > i{

    display:block;

    margin-bottom:15px;

    color:#9ca3af;

    font-size:45px;
}


.empty-state h3{

    margin:0 0 8px;

    color:#374151;

    font-size:18px;
}


.empty-state p{

    margin:0;

    color:#6b7280;

    font-size:13px;
}


/* =========================================================
   VIEW ALL PRODUCTS
========================================================= */

.view-all-products{

    display:flex;

    justify-content:center;

    margin-top:30px;
}


.view-all-products .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 22px;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:.25s;
}


.view-all-products .btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(37,99,235,.20);
}


/* =========================================================
   GALLERY
========================================================= */

#gallery{

    background:#fff;
}


.gallery{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:15px;
}


.gallery-item{

    overflow:hidden;

    border-radius:14px;

    background:#f3f4f6;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);
}


.gallery-item img{

    width:100%;

    height:220px;

    display:block;

    object-fit:cover;

    transition:.3s;
}


.gallery-item:hover img{

    transform:scale(1.04);
}


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

#contact{

    background:#f8fafc;
}


#contact .contact{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:18px;
}


#contact .contact .card{

    background:#fff;

    padding:25px 18px;

    border-radius:15px;

    border:1px solid #eef2f7;

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

    text-align:center;

    transition:.3s;
}


#contact .contact .card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 10px 22px rgba(0,0,0,.10);
}


#contact .contact .card h3{

    margin:0 0 12px;

    color:#2563eb;

    font-size:17px;
}


#contact .contact .card h3 i{

    margin-right:5px;
}


#contact .contact .card p{

    margin:0;

    color:#6b7280;

    font-size:14px;

    line-height:1.7;
}


.contact-link{

    color:#2563eb;

    text-decoration:none;

    font-weight:500;
}


.contact-link:hover{

    text-decoration:underline;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:992px){

    .hero h1{

        font-size:34px;
    }


    #services .cards{

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .accessories-grid{

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


    #products .product-grid{

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


    .gallery{

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


    #contact .contact{

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    section{

        padding:45px 12px;
    }


    section > .title{

        font-size:25px;

        margin-bottom:25px;
    }


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

    .hero{

        min-height:430px;

        padding:50px 15px;
    }


    .hero h1{

        font-size:28px;
    }


    .hero p{

        font-size:14px;

        line-height:1.7;
    }


    .hero-buttons{

        flex-direction:column;
    }


    .hero .btn{

        width:100%;

        max-width:250px;

        padding:11px 18px;

        font-size:13px;
    }


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

    #about .about{

        padding:20px;

        border-radius:12px;
    }


    #about .about p{

        font-size:14px;

        line-height:1.8;

        text-align:left;
    }


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

    #services .cards{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }


    #services .card{

        padding:17px 13px;
    }


    #services .card h3{

        font-size:15px;
    }


    #services .card p{

        font-size:12px;
    }


    /* =====================================================
       ACCESSORIES
    ===================================================== */

    .accessories-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }


    .accessories-grid .card{

        padding:18px 10px;
    }


    .accessories-grid .card > i{

        width:45px;

        height:45px;

        margin-bottom:10px;

        font-size:18px;
    }


    .accessories-grid .card h3{

        font-size:14px;
    }


    .accessories-grid .card p{

        font-size:11px;
    }


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

    .product-search-box{

        margin-bottom:12px;
    }


    #searchProduct{

        height:46px;

        font-size:13px;
    }


    .product-filters{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding:2px 2px 8px;

        margin-bottom:20px;

        scrollbar-width:none;
    }


    .product-filters::-webkit-scrollbar{

        display:none;
    }


    .filter-btn{

        flex:0 0 auto;

        padding:8px 13px;

        font-size:11px;
    }


    #products .product-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:8px;
    }


    #products .product-card{

        border-radius:12px;
    }


    .product-image-link img{

        height:150px;
    }


    .product-card-content{

        padding:10px;
    }


    .featured-badge{

        padding:4px 7px;

        font-size:8px;
    }


    .product-brand{

        font-size:9px;
    }


    .product-name{

        min-height:36px;

        margin-bottom:7px;

        font-size:13px;
    }


    .product-price{

        gap:5px;

        margin-bottom:6px;
    }


    .product-price strong{

        font-size:15px;
    }


    .product-price del{

        font-size:10px;
    }


    .product-price .saving{

        width:100%;

        font-size:9px;
    }


    .stock{

        font-size:9px;

        margin-bottom:8px;
    }


    .product-actions{

        grid-template-columns:1fr;

        gap:5px;
    }


    .product-btn{

        min-height:36px;

        padding:8px 5px;

        font-size:10px;
    }


    .view-all-products{

        margin-top:22px;
    }


    /* =====================================================
       GALLERY
    ===================================================== */

    .gallery{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:8px;
    }


    .gallery-item{

        border-radius:10px;
    }


    .gallery-item img{

        height:150px;
    }


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

    #contact .contact{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }


    #contact .contact .card{

        padding:18px 10px;

        border-radius:12px;
    }


    #contact .contact .card h3{

        font-size:14px;
    }


    #contact .contact .card p{

        font-size:12px;

        line-height:1.6;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .hero h1{

        font-size:24px;
    }


    .hero p{

        font-size:13px;
    }


    #services .cards{

        gap:8px;
    }


    #services .card{

        padding:15px 10px;
    }


    #services .card h3{

        font-size:13px;

        line-height:1.4;
    }


    #services .card h3 i{

        width:auto;

        margin-right:2px;
    }


    #services .card p{

        font-size:11px;

        line-height:1.5;
    }


    .accessories-grid{

        gap:8px;
    }


    #products .product-grid{

        gap:7px;
    }


    .product-image-link img{

        height:135px;
    }


    .product-card-content{

        padding:9px;
    }


    .product-name{

        font-size:12px;

        min-height:34px;
    }


    .product-price strong{

        font-size:14px;
    }


    .product-btn{

        min-height:34px;

        font-size:9px;
    }


    .gallery{

        gap:7px;
    }


    .gallery-item img{

        height:135px;
    }


    #contact .contact{

        grid-template-columns:1fr;
    }


    #contact .contact .card{

        padding:16px;
    }

}