/*==================================================
    EAGLE FURNITURE NGARA
    File: layout.css
    Version: 3.0
==================================================*/


/*=========================================
CONTAINER
=========================================*/

.container{

    max-width:1200px;

}


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

.section{

    padding:80px 0;

}

.section-sm{

    padding:60px 0;

}

.section-lg{

    padding:120px 0;

}


/*=========================================
SECTION TITLES
=========================================*/

.section-title{

    font-size:3rem;

    font-weight:700;

    margin-bottom:20px;

    color:var(--color-text);

}

.section-subtitle{

    max-width:700px;

    margin:0 auto 50px;

    font-size:1.1rem;

    color:var(--color-text-light);

}


/*=========================================
TEXT
=========================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}


/*=========================================
FLEX HELPERS
=========================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}


/*=========================================
GAPS
=========================================*/

.gap-1{

    gap:10px;

}

.gap-2{

    gap:20px;

}

.gap-3{

    gap:30px;

}

.gap-4{

    gap:40px;

}


/*=========================================
WIDTH
=========================================*/

.w-100{

    width:100%;

}

.max-600{

    max-width:600px;

}

.max-700{

    max-width:700px;

}

.max-800{

    max-width:800px;

}


/*=========================================
MARGINS
=========================================*/

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mt-4{

    margin-top:40px;

}

.mt-5{

    margin-top:60px;

}


.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

.mb-4{

    margin-bottom:40px;

}

.mb-5{

    margin-bottom:60px;

}


/*=========================================
PADDING
=========================================*/

.py-5{

    padding-top:80px;

    padding-bottom:80px;

}


/*=========================================
BACKGROUND
=========================================*/

.bg-light{

    background:var(--color-background);

}

.bg-white{

    background:#ffffff;

}


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

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*=========================================
DESKTOP
=========================================*/

@media (min-width:992px){

    .align-center{

        display:flex;

        align-items:center;

    }

}


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

@media(max-width:991px){

    .section{

        padding:70px 0;

    }

    .section-title{

        font-size:2.3rem;

    }

}


/*=========================================
PHONE
=========================================*/

@media(max-width:768px){

    .section{

        padding:60px 0;

    }

    .section-title{

        font-size:2rem;

    }

    .section-subtitle{

        font-size:1rem;

    }

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

.products-grid{

    display:grid;

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

    gap:35px;

    margin-top:40px;

}

.product-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.product-image{

    position:relative;

    overflow:hidden;

    height:280px;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:var(--color-primary);

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.product-content{

    padding:24px;

}

.product-category{

    color:var(--color-primary);

    font-size:14px;

    font-weight:600;

}

.product-content h3{

    margin:12px 0;

    font-size:22px;

}

.product-price{

    color:var(--color-primary);

    font-size:28px;

    font-weight:700;

    margin:18px 0;

}

.product-actions{

    display:flex;

    gap:12px;

}

.product-actions .btn{

    flex:1;

    text-align:center;

}

.shop-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.empty-products{

    text-align:center;

    padding:80px 20px;

}

.empty-products i{

    font-size:70px;

    color:var(--color-primary);

}

.empty-products h3{

    margin:20px 0 10px;

}