/*====================================
        LEARN MORE PAGE
====================================*/

.about-hero{
    margin-top:90px;
    height:380px;
    background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
    url("images/about-bg.jpg") center/cover;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
}

.about-hero h1{
    font-size:60px;
    color:#d4af37;
    margin-bottom:20px;
}

.about-hero p{
    max-width:700px;
    color:#ddd;
    font-size:18px;
    line-height:1.8;
}

/*=========================
MAIN GRID
=========================*/

.about-wrapper{

    width:90%;
    max-width:1400px;

    margin:70px auto;

    display:grid;

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

    gap:30px;

    align-items:start;

}

/*=========================
BOXES
=========================*/

.about-box{

    background:#111;

    border-radius:20px;

    padding:35px;

    border:1px solid rgba(212,175,55,.2);

    transition:.35s;

    height:auto;

    overflow:hidden;

}

.about-box:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(212,175,55,.15);

}

.about-box h2{

    display:flex;

    align-items:center;

    gap:12px;

    color:#d4af37;

    font-size:30px;

    margin-bottom:30px;

}

.about-box p{

    color:#ddd;

    line-height:1.8;

    margin-bottom:20px;

}

/*=========================
MISSION & VISION
=========================*/

.about-info{

    margin-top:30px;

}

.info-item{

    display:flex;

    gap:18px;

    margin-bottom:25px;

}

.info-item i{

    color:#d4af37;

    font-size:28px;

    margin-top:5px;

}

.info-item h3{

    color:#d4af37;

    margin-bottom:8px;

}

/*=========================
WHAT WE SELL
=========================*/

.category-grid{

    display:grid;

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

    gap:18px;

}

.category-card{

    background:#1a1a1a;

    border:1px solid rgba(212,175,55,.15);

    border-radius:15px;

    height:150px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.3s;

}

.category-card:hover{

    background:#d4af37;

    transform:translateY(-5px);

}

.category-card:hover h3{

    color:#000;

}

.category-card:hover .category-icon{

    transform:scale(1.1);

}

.category-icon{

    font-size:42px;

    margin-bottom:12px;

}

.category-card h3{

    color:#fff;

    font-size:18px;

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

.feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:#1a1a1a;

    border:1px solid rgba(212,175,55,.12);

    border-radius:15px;

    padding:18px;

    margin-bottom:18px;

    transition:.3s;

}

.feature:hover{

    transform:translateX(8px);

    border-color:#d4af37;

    box-shadow:0 10px 25px rgba(212,175,55,.15);

}

.feature i{

    color:#d4af37;

    font-size:28px;

    min-width:40px;

    margin-top:5px;

}

.feature h3{

    color:#fff;

    margin-bottom:8px;

    font-size:20px;

}

.feature p{

    color:#bbb;

    margin:0;

    line-height:1.6;

}


/*====================================
        PAYMENT LIST
====================================*/

.about-box ul{

    list-style:none;

    padding:0;

    margin:0;

}

.about-box ul li{

    padding:18px 0;

    color:#ddd;

    border-bottom:1px solid rgba(255,255,255,.08);

    font-size:17px;

}

.about-box ul li:last-child{

    border-bottom:none;

}


/*====================================
        START SHOPPING
====================================*/

.center{

    text-align:center;

}

.gold-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 35px;

    margin-top:15px;

    text-decoration:none;

    color:#000;

    background:#d4af37;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.gold-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(212,175,55,.35);

}


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

footer{

    margin-top:70px;

    background:#0b0b0b;

    padding:35px;

    text-align:center;

    border-top:1px solid rgba(212,175,55,.15);

}

footer p{

    color:#999;

    font-size:15px;

}


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

@media(max-width:900px){

.about-hero{

    height:300px;

}

.about-hero h1{

    font-size:42px;

}

.about-hero p{

    font-size:16px;

}

.about-wrapper{

    grid-template-columns:1fr;

}

.category-grid{

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

}

}

@media(max-width:600px){

.category-grid{

    grid-template-columns:1fr;

}

.about-box{

    padding:25px;

}

.about-box h2{

    font-size:24px;

}

.feature{

    flex-direction:column;

    text-align:center;

}

.feature i{

    margin:auto;

}

.gold-btn{

    width:100%;

    justify-content:center;

}

}
/* ===============================
   MS EMPIRE STORE
   Luxury Black & Gold Theme
================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#fff;
    overflow-x:hidden;
}

/* Gold Accent */
:root{
    --gold:#d4af37;
    --dark:#050505;
    --card:#111111;
    --light:#f5f5f5;
}
/* ================= HEADER ================= */

header{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    padding:18px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(12px);
    z-index:999;
    border-bottom:1px solid rgba(212,175,55,.25);
}

.logo{
    font-size:28px;
    font-weight:700;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:10px;
}

img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
nav{
    display:flex;
    gap:35px;
}

nav a{
    text-decoration:none;
    color:white;
    font-size:16px;
    transition:.35s;
}

nav a:hover{
    color:var(--gold);
}

.cart-btn{
    text-decoration:none;
    background:var(--gold);
    color:black;
    padding:12px 24px;
    border-radius:40px;
    font-weight:600;
    transition:.35s;
}

.cart-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 20px rgba(212,175,55,.6);
}