@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

body{
    margin:0;
    padding:0;

    font-family:'Montserrat',sans-serif;

    background:
    linear-gradient(
    135deg,
    #020817,
    #071120,
    #0d2340
    );

    color:white;

    overflow-x:hidden;
}

/* =========================
   NAVBAR
========================= */

.nav-links{

    width:100%;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:42px;

    padding:0 40px;

    background:
    linear-gradient(
    90deg,
    #111827,
    #1e293b
    );

    border-bottom:
    1px solid rgba(0,210,255,.12);

    box-shadow:
    0 2px 20px rgba(0,0,0,.35);
}

.nav-item{

    position:relative;

    color:#f8fafc;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.25s;
}

.nav-item:hover{

    color:#00d2ff;
}

.nav-item::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:#00d2ff;

    transition:.25s;
}

.nav-item:hover::after{

    width:100%;
}

.nav-item.active{

    color:#00d2ff;
}

.nav-item.active::after{

    width:100%;
}
/* =========================
   MAIN
========================= */

.shop-container{

    width:90%;

    max-width:1400px;

    margin:70px auto;
}

/* =========================
   TITLE
========================= */

.shop-title{

    font-size:58px;

    font-weight:800;

    text-align:center;

    margin-bottom:30px;

    line-height:1.1;
}

/* =========================
   SWITCHERS
========================= */

.currency-switcher,
.coupon-switcher{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:20px;
}

.currency-btn,
.coupon-btn{

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.06);

    color:white;

    padding:10px 18px;

    border-radius:12px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

.currency-btn:hover,
.coupon-btn:hover{

    border-color:#00d2ff;
}

.currency-btn.active,
.coupon-btn.active{

    background:
    linear-gradient(
    135deg,
    #00d2ff,
    #3a7bd5
    );

    border:none;
}

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

.diamonds-grid{

    display:grid;

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

    gap:24px;

    margin-top:40px;
}

/* =========================
   CARDS
========================= */

.diamond-pack{

    background:
    linear-gradient(
    180deg,
    rgba(15,23,42,.95),
    rgba(8,17,32,.95)
    );

    border:
    1px solid rgba(255,255,255,.05);

    border-radius:18px;

    padding:34px 24px;

    text-align:center;

    transition:.2s;

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

.diamond-pack{

    background:
    linear-gradient(
    180deg,
    rgba(15,23,42,.96),
    rgba(8,17,32,.96)
    );

    border:
    1px solid rgba(255,255,255,.05);

    border-radius:16px;

    padding:22px 18px;

    text-align:center;

    transition:.2s;

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

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    min-height:260px;
}

    transform:translateY(-4px);

    border-color:#00d2ff;
}

/* FEATURED */

.featured{

    border:
    1px solid rgba(0,210,255,.22);
}

.popular-tag{

    position:absolute;

    top:14px;
    right:14px;

    background:#00d2ff;

    color:#071120;

    font-size:11px;

    font-weight:800;

    padding:6px 12px;

    border-radius:999px;
}

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

.diamond-amount{

    font-size:36px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:16px;
}

.diamond-price{

    font-size:30px;

    font-weight:800;

    color:#00d2ff;

    margin-bottom:24px;
}

/* =========================
   BUTTON
========================= */

.buy-btn{

    width:100%;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:
    linear-gradient(
    135deg,
    #00d2ff,
    #3a7bd5
    );

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.2s;
}

.buy-btn:hover{

    box-shadow:
    0 0 14px rgba(0,210,255,.18);
}

/* MOBILE */

@media(max-width:768px){

    .shop-title{
        font-size:38px;
    }

    .diamond-amount{
        font-size:28px;
    }

}/* =========================
   FIX GRID + REMOVE SCANNER
========================= */

/* GRID */
.diamonds-grid{

    display:grid;

    grid-template-columns:
    repeat(5, 220px);

    gap:20px;

    justify-content:center;

    margin-top:40px;
}

/* TABLET */

@media(max-width:1400px){

    .diamonds-grid{

        grid-template-columns:
        repeat(4, 220px);
    }
}

/* SMALL */

@media(max-width:1100px){

    .diamonds-grid{

        grid-template-columns:
        repeat(3, 220px);
    }
}

/* MOBILE */

@media(max-width:800px){

    .diamonds-grid{

        grid-template-columns:
        repeat(2, 220px);
    }
}

@media(max-width:520px){

    .diamonds-grid{

        grid-template-columns:
        repeat(1, 220px);
    }
}

.diamond-pack{

    min-height:240px !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:space-between !important;

    align-items:center !important;

    padding:22px 18px !important;
}
position:relative;

overflow:hidden;
/* TEXT */

.diamond-amount{

    min-height:60px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    text-align:center !important;

    font-size:22px !important;

    line-height:1.15 !important;
}

.diamond-price{

    min-height:42px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;
}

/* BUTTON */

.buy-btn{

    margin-top:auto !important;

    width:100% !important;
}

/* REMOVE SCANNER PREVIEW */

.shop-preview,
.preview-image,
.scanner-preview,
.side-preview{

    display:none !important;
}
@media(max-width:1300px){

    .diamonds-grid{
        grid-template-columns:
        repeat(4,220px);
    }

}

@media(max-width:1050px){

    .diamonds-grid{
        grid-template-columns:
        repeat(3,220px);
    }

}

@media(max-width:800px){

    .diamonds-grid{
        grid-template-columns:
        repeat(2,220px);
    }

}

@media(max-width:520px){

    .diamonds-grid{
        grid-template-columns:
        repeat(1,220px);
    }

}
.currency-switcher,
.coupon-switcher{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    width:100%;

    margin:0 auto 18px auto;
}.shop-controls{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    margin-bottom:35px;
}
.nav-logo{

    font-size:22px;

    font-weight:800;

    letter-spacing:2px;

    color:#00d2ff;

    margin-right:30px;

    text-shadow:
    0 0 14px rgba(0,210,255,.35);
}

.featured{

    position:relative;

    border:
    1px solid rgba(0,210,255,.35);

    box-shadow:
    0 0 30px rgba(0,210,255,.12);
}

.popular-badge{

    position:absolute;

    top:16px;

    right:16px;

    background:
    linear-gradient(
    135deg,
    #00d2ff,
    #007bff
    );

    color:white;

    font-size:11px;

    font-weight:900;

    padding:7px 12px;

    border-radius:999px;

    letter-spacing:.5px;

    box-shadow:
    0 0 15px rgba(0,210,255,.25);
}
.diamonds-section{

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

    margin:0 auto;

    padding:140px 40px 80px;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.controls-wrapper{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:18px;

    margin-bottom:50px;
}

.shop-title{

    font-size:72px;
    font-weight:900;

    color:white;

    text-align:center;

    margin-bottom:40px;
}

.products-grid{

    width:100%;

    display:grid;

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

    gap:28px;
}@media (max-width: 768px){

    body{
        overflow-x:hidden;
    }

    .nav-links{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:6px;

        padding:10px;

        width:100%;
    }

    .nav-item{

        font-size:12px;

        padding:6px 8px;
    }

    .diamonds-section{

        width:100%;

        padding:110px 12px 40px;

        align-items:center;
    }

    .shop-title{

        font-size:34px !important;

        line-height:1.05;

        text-align:center;

        max-width:320px;

        margin:0 auto 30px;
    }

    .controls-wrapper{

        width:100%;

        gap:12px;

        align-items:center;
    }

    .currency-switcher,
    .coupon-switcher{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:10px;

        width:100%;
    }

    .currency-btn,
    .coupon-btn{

        min-width:70px;

        font-size:13px;

        padding:10px 12px;
    }

    .products-grid{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:18px;
    }

    .diamond-pack{

        width:100%;

        max-width:320px;
    }

}